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分钟才能看到效果而烦恼了。

Logo

前往低代码交流专区

更多推荐