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分鐘才能看到效果而煩惱了。