引起

公司搭建了一套webpack多页应用脚手架，刚开始很酷，解决了使用Vue进行模块化开发和多页打包在线管理的初衷。但是，随着业务项目的增加，我发现当npm运行dev时，每次热加载时，webpack的响应都很慢。

它基本上会卡住

94%资产优化95%排放是一个漫长的步骤

准备查明问题的原因。因为项目是基于vue-cli重写的多页应用脚手架，手动重写了HtmlWebpackPlugin插件，基本猜测与此有关，事实证明这确实是造成的。

我们可以在package.json中启动dev时添加- profile命令来查看启动的细节。

我们可以看到，资产优化的过程大约需要2s，有时会更长，所以基本可以确定这个地方被HMR卡住了。

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

优化思路-1

第一个想法是在开发过程中添加参数或手动更改配置，并且只为当前开发的项目加载模块。

更改webpack配置是一个相对直接的解决方案，比如配置当前启动的目录(构建页面)，判断何时新增htmlWebPackPlugin。

在第二个方案中，您还可以手工编写webpack-dev-server。

在旧版本中，dev-server位于构建目录下，这便于更改和重写。但是，新版本是node_modules中加载的模块。

重写的话需要自己做一套东西，加上参数来判断。我还没有时间尝试它。如果有人有时间，你可以试着提高HMR的效率。

实践证明，第一种方案确实可以提高HMR的速度。但是，由于项目是多人共同开发和维护的，每个开发人员都很容易更改自己的配置配置，这可能会导致提交svngit时发生冲突或忘记修改配置。因此，除了个人维护项目，不建议这样做。

优化思路-2

其实造成这个问题的具体原因是改为多入口后，对于HtmlWebpackPlugin中的每个入口文件，都会执行一次emit中的所有代码逻辑，影响速度。

看了一些参考资料，发现可以用现有的造轮子的方法，就是[html-web pack-plugin-for-multi-html](https://github.com/daifee/html-webpack-plugin-for-multihtml)

在这个插件中，相关变量在webpack done hook函数中设置，以确保原始html-webpack-plugin插件中的emit只触发所有进程一次。达到加速的效果。升级后，副本被修改，HMR的速度从原来的秒级变为毫秒级。

可以看出，资产优化已经优化到毫秒级。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。