前言
隨著前端工程化的開發方式日益完善，像 webpack、rollup、gulp 等工具已經融入到我們的日常開發之中。最常見的就是 webpack ，一個模塊打包工具。
但隨著項目的功能需求迭代，代碼量越來越多，原先構建時沒有暴露的問題現在倍數級放大。
我目前的項目首次編譯時間達到 43 秒，你是否能想象我們是怎麼等待每次的代碼修改？
接下來，我將列舉 6 種切實可行的高效方案，讓整個構建時間由 43 秒降到 4 秒。
優化點排查
你可以查看之前我寫過的：
我在這篇文章中分析了是什麼導致目前項目構建時間長的原因。
希望你也能借助這兩款工具，分析出你項目構建慢的真正原因。
externals 外鏈第三方依賴
時間：43.8s -> 40.8s
externals 是常用優化手段。構建時，將依賴文件相關從 node_modules 導入改為外部鏈接引用（即：通過>
你可以把常見的 libs 以 CDN 的方式導入，像 vue，react，jquery 等，他們的官方都提供了可靠的 CDN 服務。
externals 外部變量定義
webpack-bundle-analyzer 前後對比
前
後
體積最大的 js 編譯後，由 900 kb 降到了 421 kb （大小減了 30%）
替換 css 編譯工具
時間：40.8s -> 35.8
用 fast-sass-loader 替換 sass-loader
為什麼 fast-sass-loader 那麼快？
fast-sass-loader 將 sass 文件扁平化使 node-sass 不會重複編譯同個文件，編譯前會對所有的文件進行合併，按照一個大文件進行編譯，同時內部有 cache 機制針對每個 entry 文件。
同時使用了 fast-sass-loader 就不用使用 resolve-url-loader 來解決 sass-loader 路徑引用的問題。
使用 CommonsChunkPlugin 提取公共代碼
時間：35.8s -> 27.9
提取後
提取前
提取後
能從上兩圖看到，重複模塊的引用問題得到解決。並且數量大幅降低。
babel-loader 優化
時間：27.9s -> 21.6s
設置 babel-loader 編譯過程中需要解析的路徑，以及排除 node_modules 相關依賴；
同時加上 cacheDirectory 開啟緩存。
開啟多線程
時間：21.6s -> 18.3s
使用 happypack plugins ，它將盡可能利用硬件資源，多線程方式來編譯代碼。
雖說開啟多線程會加快編譯的速度，但就目前情況而言減少幅度很少，不像網上那麼明顯。
考慮原因是，基本已經優化的差不多了，代碼編譯已經瞬時可以完成了，不再需要多線程的幫助了。開啟多線程還會增加額外的判斷。
優化多頁面
時間：21.6s -> 最低 4s
這條因項目而異（可能對你不適用，但我希望能 get 到其中的思想）
由於我們項目是多頁面應用，中間使用了 html-webpack-plugin 來做 chunks js 的自動引用，導致這個 html-webpack-plugin 插件會被執行多次（50個chunks ，就會有50次）
我測試過，當註釋掉該插件的使用後，整個項目的構建時間大幅降低，所以接下來的構建優化將以此插件為入口。
根據分析，雖然會有多次的該插件的使用，但實際只是其中某個 entry 的參數不同，僅此而已。
社區有解決方案，你可以試下 html-webpack-plugin-for-multihtml，不過即使這樣我更想通過簡單粗暴的辦法來質變它。
我們的業務模塊，大體會分為 A，B，C，D，E …，如果今天開發的需求是涉及 A 的，能不能只編譯 A 模塊相關的 entry 文件呢？假設分了 5 個大類，那麼現在只編譯其中的一類，連小學生都知道編譯時間就是縮短 5 倍。
就這樣，我把原先的 entry 做了調整，按需分類：
當我需要 user 用戶模塊時，只要構建 user 相關的文件就可以了。編譯時間大幅降低。
為了將此過程在開發中不繁瑣，我針對該項目寫了個簡單的腳本，當選擇好編譯模塊後，再開始 webpack 構建。
按需構建
如果你有興趣可以看下 inquirer 模塊，當然這不是本文的重點。
總結
通過上面這六板斧，將構建時間降到了最低 4s 。
同時 webpack 構建的優化還有其他方式，我列舉幾個關鍵字：
devtool、resolve、cache-loader、Dllplugin、uglify-parallel、hot、webpack upgrade ...
就目前該項目的成績，基本夠用了。希望能讓閱讀此文的你得到些啟發。
關於我
一位“前端工程師”，樂於實踐，並分享前端開發經驗。
如果有問題或者想法，歡迎各位評論留言，願大家共同進步。
關注【前端雨爸】，查閱更多前端技術心得。
閱讀更多 前端雨爸 的文章
