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配置修改如下:

1. 在项目配置文件index.js中新建以下目录，包含项目所有入口的名称：

 

1. 在动态读取入口文件的工具函数中，增加过滤条件，过滤掉不需要放入buildList中的模块，这样，工具函数只会读取在buildList中需要加载的模块，这样，webpack就实现了按需编译和加载，更新效率会得到提升。

以下是配置代码：

四、使用方法

开发过程中只需在index.js中注释掉不需要调试的模块 。

如下，只调试Test1模块，只将该模块加入buildList，其余模块注释即可：

 

五、注意事项

Index.js仅供调试过程中个人使用，修改后不要上传SVN

六、测试结果

修改前：

Npm run dev 起项目耗时2分多钟

修改后：

Npm run dev 调试一个页面起项目耗时仅9秒

再也不用为改代码保存一下要等2分钟才能看到效果而烦恼了。