为什么我的Webpack多页应用HMR更新时总是卡住？

本文共计748个文字，预计阅读时间需要3分钟。

起因+在公司搭建了一套webpack多页面应用脚手架，开始用着很爽，解决了想使用Vue的模块化开发，还想做多页面打包上线管理的初步，但随着业务项目的增加，我发现npm run dev的时候，每次都要等很久。

起因

在公司搭建了套webpack多页面应用脚手架，开始用着很爽，解决了既想使用Vue的模块化开发，又想做多页打包上线管理的初衷，但是随着业务项目的增加，我发现npm run dev的时候，每次热加载，webpack的反应都很慢。

基本会卡在

94% assets optimization95% emitting

这个步骤很久

准备具体定位一下问题的原因。由于项目基于vue-cli改写的多页应用脚手架，手动重写了HtmlWebpackPlugin插件，所以基本猜测和这个有关，后来证明也真的是这个引起的。

我们可以在package.json中启动dev的时候添加--profile命令，去看启动的详情。

我们可以看到，asset optimization过程耗时2s左右，有时候会更长，所以基本确定就是这个地方卡住了HMR。

那么问题来了，怎么优化这里？

优化思路-1

第一想法是，在dev的时候，加入参数或手动更改config，只针对当前开发的项目进行模块的加载。

更改webpack配置是比较直接的方案，比如把当前启动的目录配置好(buildingPage), new HtmlWEbpackPlugin的时候进行判断即可。