webpack vue热加载编译速度慢

问题描述： vue2.x + iview项目随着文件越来越多打包速度越来越慢

76％ basic chunk optimization RemoveParentModulesPlugin

解决方法：

安装babel-plugin-dynamic-import-node插件

npm install babel-plugin-dynamic-import-node --save-dev

配置 .babelrc 文件

{
    presets: [
        '@vue/app'
    ],
    env: {
        development: {
          plugins: ['dynamic-import-node']
        }
    }
}

衍生问题：

问题1 安装了插件后，打包速度提高了，但是打dist包测试的时候发现漏了好多包，造成了无法发版。

解决发版问题

打版时候把 .babelrc文件中下面的代码注释掉即可，打完包在恢复过来，这样打包也可以，热更新又快。

    env: {
        development: {
          plugins: ['dynamic-import-node']
        }
    }

问题2 安装了插件后，打包报错 Critical dependency: the request of a dependency is an expression

根据提示可以找到主要造成这个问题的代码是以下这段：

export const loadView = (view) => { // 路由懒加载
    return () => import(`@/views/${view}`)
}

全局搜索node_modules我们可以看到这个问题是由webpack 的 lib/dependencies/ContextDependencyHelpers.js 第224行报出的警告；
然后在官方的issues中也能找到相关问题；

不过官方似乎并没有给出解决方案（也可能是我没有找到），也许是官方并不赞同import(@/views/${view})这种引入方式；

我们也可以想办法换个方式引入，例如：

export const loadView = (view) => { // 路由懒加载
    return () => Promise.resolve(require(`@/views/${view}`).default)
}

这样既能保证组件的异步载入，也不会被webpack报异常，terminal看起来舒服多了；

webpack 版本问题，webpack4中动态import不支持变量方式，

该修改对于生产环境无影响，只在开发环境有问题

备注

http://zhihesj.com/?id=771