关于webpack4提高热更新速度

其实相对 webpack 线上打包速度，我更关心的本地开发热更新速度，毕竟这才是和我们每一个程序员每天真正打交道的东西，打包一般都会扔给CI自动执行，而且一般项目每天也不会打包很多次。

webpack 4一直说自己更好的利用了cache提高了编译速度，但实测发现是有一定的提升，但当你一个项目，路由懒加载的页面多了之后，50+之后，热更新慢的问题会很明显，之前的文章中也提到过这个问题，原以为新版本会解决这个问题，但并没有。

不过你首先要排斥你的热更新慢不是，如：

• 没有使用合理的 Devtool souce map 导致

• 没有正确使用 exclude/include 处理了不需要处理的如node_modules

• 在开发环境不要压缩代码UglifyJs、提取 css、babel polyfill、计算文件 hash 等不需要的操作

旧方案

最早的方案是开发环境中不是用路由懒加载了，只在线上环境中使用。封装一个_import函数，通过环境变区分是否需要懒加载。

开发环境：

 module.exports = file => require("@/views/" + file + ".vue").default;

生成环境：

module.exports = file =>() =>import("@/views/" + file + ".vue");复制代码

但由于 webpack import实现机制问题，会产生一定的副作用。如上面的写法就会导致@/views/下的 所有.vue 文件都会被打包。不管你是否被依赖引用了，会多打包一些可能永远都用不到 js 代码。

目前新的解决方案思路还是一样的，只在生成模式中使用路由懒加载，本地开发不使用懒加载。但换了一种没副作用的实现方式。

新方案

使用babel 的 pluginsbabel-plugin-dynamic-import-node。它只做一件事就是：将所有的import()转化为require()，这样就可以用这个插件将所有异步组件都用同步的方式引入了，并结合 BABEL_ENV 这个bebel环境变量，让它只作用于开发环境下。将开发环境中所有import()转化为require()，这种方案解决了之前重复打包的问题，同时对代码的侵入性也很小，你平时写路由的时候只需要按照官方文档路由懒加载的方式就可以了，其它的都交给babel来处理，当你不想用这个方案的时候，也只需要将它从babel 的 plugins中移除就可以了。

具体代码：

首先在package.json中增加BABEL_ENV

"dev":"BABEL_ENV=development webpack-dev-server XXXX"复制代码

接着在.babelrc只能加入babel-plugin-dynamic-import-node这个plugins，并让它只有在development模式中才生效。

{
  "env": {
    "development": {
      "plugins": ["dynamic-import-node"]
    }
  }
}复制代码

之后就大功告成了，路由只要像平时一样写就可以了。

 { path: '/login', component: () =>import('@/views/login/index')}复制代码

这样能大大提升你热更新的速度。基本两百加页面也能在2000ms的热跟新完成，基本做到无感刷新。当然你的项目本身就不大页面也不多，完全没必要搞这些。当你的页面变化跟不是你写代码速度的时候再考虑也不迟。