Webpack多頁應用HMR卡住問題

Talk is cheap, show me the code

原由

在公司搭建了套webpack多頁面應用腳手架，開始用着很爽，解決了既想使用Vue的模塊化開發，又想作多頁打包上線管理的初衷，可是隨着業務項目的增長，我發現npm run dev的時候，每次熱加載，webpack的反應都很慢。

基本會卡在

94% assets optimization95% emitting複製代碼

這個步驟好久

準備具體定位一下問題的緣由。因爲項目基於vue-cli改寫的多頁應用腳手架，手動重寫了HtmlWebpackPlugin插件，因此基本猜想和這個有關，後來證實也真的是這個引發的。

咱們能夠在package.json中啓動dev的時候添加--profile命令，去看啓動的詳情。

咱們能夠看到，asset optimization過程耗時2s左右，有時候會更長，因此基本肯定就是這個地方卡住了HMR。

那麼問題來了，怎麼優化這裏？

• 優化思路-1

• 第一想法是，在dev的時候，加入參數或手動更改config，只針對當前開發的項目進行模塊的加載。

更改webpack配置是比較直接的方案，好比把當前啓動的目錄配置好(buildingPage), new HtmlWEbpackPlugin的時候進行判斷便可。

• 第二個方案，固然也能夠手寫webpack-dev-server。

dev-server這個在老版本是在build目錄下面的，比較方便改動重寫，然而新的版本，是在node_modules中的已經加載的模塊，

重寫的話須要本身把這個東東搞一套，加入參數進行判斷處理，本人尚未時間進行嘗試，若是有人有時間的能夠試試可否改善HMR效率。

實踐證實第一個方案確實會提升HMR速度，但因爲項目是多人共同開發和維護，每一個開發者更改本身的config配置，極容易形成提交svn\git衝突，或忘記修改config等情況，因此除了我的維護的項目，並不建議這麼作。

• 優化思路-2

其實這個問題的具體緣由就是改成多入口以後，在HtmlWebpackPlugin中會對每個入口文件都執行一遍emit中全部代碼邏輯，正是這個緣由影響了速度。

在看一些參考資料以後，我發現已經有現有的造輪子可使用了，就是 [html-webpack-plugin-for-multihtml](https://github.com/daifee/html-webpack-plugin-for-multihtml)

該插件經過在webpack done鉤子函數中設置相關變量，來保證原html-webpack-plugin插件中emit僅觸發一次所有流程。來達到提速的效果。升級之後，修改文案，HMR的速度從原來的秒級改成毫秒級。

能夠看出 asset optimization已經優化到毫秒級。

參考文章

webpack多頁面構建優化不徹底指北