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已經優化到毫秒級。