Webpack多页应用HMR卡住问题

Talk is cheap, show me the code

原由

在公司搭建了套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的时候进行判断便可。

• 第二个方案，固然也能够手写webpack-dev-server。

dev-server这个在老版本是在build目录下面的，比较方便改动重写，然而新的版本，是在node_modules中的已经加载的模块，

重写的话须要本身把这个东东搞一套，加入参数进行判断处理，本人尚未时间进行尝试，若是有人有时间的能够试试可否改善HMR效率。

实践证实第一个方案确实会提升HMR速度，但因为项目是多人共同开发和维护，每一个开发者更改本身的config配置，极容易形成提交svn\git冲突，或忘记修改config等情况，因此除了我的维护的项目，并不建议这么作。

• 优化思路-2

其实这个问题的具体缘由就是改成多入口以后，在HtmlWebpackPlugin中会对每个入口文件都执行一遍emit中全部代码逻辑，正是这个缘由影响了速度。

在看一些参考资料以后，我发现已经有现有的造轮子可使用了，就是 [html-webpack-plugin-for-multihtml](https://github.com/daifee/html-webpack-plugin-for-multihtml)

该插件经过在webpack done钩子函数中设置相关变量，来保证原html-webpack-plugin插件中emit仅触发一次所有流程。来达到提速的效果。升级之后，修改文案，HMR的速度从原来的秒级改成毫秒级。

能够看出 asset optimization已经优化到毫秒级。

参考文章

webpack多页面构建优化不彻底指北