完美解決Webpack多頁面熱載入緩慢問題
阿新 • • 發佈:2018-12-26
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分鐘才能看到效果而煩惱了。