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

最新推荐文章于 2025-11-17 03:34:23 发布

原创

最新推荐文章于 2025-11-17 03:34:23 发布 · 6.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #热部署 #多页面 #vue-cli

在多页面前端开发中，webpack的HMR热部署时间过长，特别是当页面数量增加时。问题主要出在asset optimization阶段，每次修改都会重建所有页面。通过使用html-webpack-plugin-for-multihtml替换html-webpack-plugin，并结合multihtmlCache，可以显著提高热部署效率，避免对所有HTML页面进行不必要的处理。

问题

在前端多页面（多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))
}