Webpack多页面热加载缓慢问题分析与解决
一、问题引入
使用webpack + vue多入口模式后，随着项目模块越来越多，整个项目的入口多达30多个，热更新变得缓慢，保存一次等待热加载的时间多达2-3分钟，这也意味着，改一下代码保存后要等2分多钟才能看到效果，非常影响开发效率。
二、问题分析
我们的代码无问题，而是html-webpack-plugin插件存在性能问题
论证：
html-webpack-plugin的github上，插件作者有发布几十条lssues（链接https://github.com/jantimon/html-webpack-plugin/issues），其中就包括该插件的多页面性能问题，下图是github上的部分issues：
三、解决方案
我们改变不了插件本身，但是可以考虑开发环境中按需加载和热更新。
将webpack配置修改如下:
- 在项目配置文件index.js中新建以下目录，包含项目所有入口的名称：
- 在动态读取入口文件的工具函数中，增加过滤条件，过滤掉不需要放入buildList中的模块，这样，工具函数只会读取在buildList中需要加载的模块，这样，webpack就实现了按需编译和加载，更新效率会得到提升。
以下是配置代码：
四、使用方法
开发过程中只需在index.js中注释掉不需要调试的模块 。
如下，只调试Test1模块，只将该模块加入buildList，其余模块注释即可：
五、注意事项
Index.js仅供调试过程中个人使用，修改后不要上传SVN
六、测试结果
修改前：
Npm run dev 起项目耗时2分多钟
修改后：
Npm run dev 调试一个页面起项目耗时仅9秒
再也不用为改代码保存一下要等2分钟才能看到效果而烦恼了。