详细解释webpack多入口热加载慢的原因

之前为公司搭建了一套webpack多页应用脚手架，刚开始用的很好。资源被集成和打包，基于组件的开发，各种组件被重用，需要什么就拿什么。后来入口有50页，慢慢发现保存后每次热负荷的等待时间越来越长，用了10多秒，确实影响了开发效率，于是找原因。

观察到每次到热加载的时候，都会长时间停留在发出HtmlWebpackPlugin。

所以我想知道它停留了多久。

将- profile添加到package.json，它将告诉您编译过程中哪些步骤花费的时间最长。

停止npm，重新运行webpack-dev-server，修改文件并单击保存。观察控制台后发现总花费的时间是15035毫秒，发出需要13239毫秒，应该是指上图的发出HtmlWebpackPlugin。似乎可以解决HtmlWebpackPlugin，热加载速度可以恢复正常。

HtmlWebpackPlugin是对应我们门户的html页面。新页面越多，热加载速度就会越慢。

我试着注释掉所有的html页面，只留下一个案例细节的html页面，重启webpack-dev-server，修改文件，按Save，发现速度惊人，只有772 mm，看来问题出在插件html-webpack-plugin上。

我的html-webpack-plugin配置有问题吗，于是在网上搜索解决方案，做了各种尝试，直到找到html-webpack-plugin的github才放弃搜索。最初的插件作者发布了几十个lssue(link https://github.com/Jan Timon/html-web pack-plugin/issues)，包括插件的多页性能问题。

我试着点进问题对话并阅读它。其中的内容不能再被认为是如何配置html-webpack-plugin插件了。它涉及到了webpack底层的东西，让人们不得不思考现在的WebPack是否适合多页开发。

总结：

1.HtmlWebpackPlugin，除了正在开发的页面，其他注释都省略了。

2.等待插件作者修复这个问题。

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