完美解决webpack多页面热部署缓慢问题

问题

在前端多页面（多html）开发的时候，使用webpack进行HMR热部署，但每一次修改之后，热部署持续很长的时间，而且页面越多，时间越长，观察可知大部分时间花在 asset optimization 这一步。每次修改都会触发所有页面的重新构建，但其实我们只需要更新修改的页面即可。

原因

使用 vue-cli 等脚手架搭建的时候，会默认在 webpack.dev.conf.js 中配置 html-webpack-plugin  模块，对于多页面，它需要配置所有页面，所以每次都会对所有 html 进行处理。

...
const HtmlWebpackPlugin = require('html-webpack-plugin')
...

for(let pathName in pages){
  let options = {
    filename: `${pathName}.html`,
    template: pages[pathName],
    inject: true,
    chunks: [pathName]
  }
  // 需要配置所有 html，但因此热部署也需要扫描所有 html
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(options))
}

不建议的解决方法

网上看到某种很笨拙的解决方法，为了不误导，我就不贴链接和方法了，你可能之前有阅读过。这个 bad idea 大概如下：

在 webpack 配置 html-webpack-plugin 只想要热部署的 html 页面

这确实有效，但是每次都要去修改配置，有时候粗心还可能导致这个修改提交到 git/svn，影响其他人的开发。

解决方法

使用 html-webpack-plugin-for-multihtml 代替 html-webpack-plugin  模块，并且加上 multihtmlCache

...
const HtmlWebpackPlugin = require('html-webpack-plugin-for-multihtml')    // 替换组件
...

for(let pathName in pages){
  let options = {
    filename: `${pathName}.html`,
    template: pages[pathName],
    inject: true,
    chunks: [pathName],
    multihtmlCache: true    // 解决多页热部署的关键
  }
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(options))
}

修改后可以显著提升热部署速度