前言

隨著前端工程化的開發方式日益完善，像 webpack、rollup、gulp 等工具已經融入到我們的日常開發之中。最常見的就是 webpack ，一個模塊打包工具。

但隨著項目的功能需求迭代，代碼量越來越多，原先構建時沒有暴露的問題現在倍數級放大。

你能想象改個 css、js 文件整個項目的構建居然要從原先的幾秒到如今的半分鐘，甚至更多時間，簡直無法忍受，嚴重影響工作效率。

這篇文章將使用兩個工具來讓你定位是什么原因導致那么長的構建時間。

webpack-bundle-analyzer

webpack-bundle-analyzer 是個 webpack 可視化分析工具。利用 webpack-bundle-analyzer 可以看到項目中所有模塊體積大小的分布。

---

環境準備

它的安裝、集成到現有項目非常容易。掛載到 webpack 對應的 plugin 選項中即可。

---

運行

隨著你啟 webpack 的構建完成，最后它將默認啟動一個 http://127.0.0.1:8888 來顯示分析好的可視化頁面。

因為它內置會有個 server ，所以不需要我們添加額外的服務。

---

結果分析

從上圖的 Treemap 中，我們就能看到項目中所有的模塊的體積大小，以及每個模塊中的內含關系。

你可以點開這張圖，大致能得到如下這些信息：

每個 chunks 很大，最大的一個甚至有 943 kb，平均也都 600 kb 以上

每個 chunks 模塊，都內含一個 jquery 文件，并且 css 也占有一定的比重

所有 chunks 的個數非常多，總共有 50 多個

webpack 自帶 profile 分析

---

環境準備

相比前者工具，這個 profile 分析器是 webpack 內置的，我們只要在運行命令后添加相關參數即可。

最后它會在項目中，生成一個 profile.json 。

---

結果分析

我們只要把它上傳到 webpack 分析的網站機會得到一份報表。

http://webpack.github.io/analyse/#home

下面我就截圖核心的幾個圖，來重點看下：

概覽

模塊引用

模塊引用&大小

大模塊

同樣根據上面 4 張圖的展示，就能得出如下信息：

所使用的 webpack 版本為 3.12.0

總模塊高達 300 多個，chunks 54 個

模塊 modules 被多個 chunks 共同引用

幾乎每個 chunks 都引用 jquery 文件，總體積占到了 11 M

scss 編譯時間占用過多

結論

通過 webpack-bundle-analyzer 和 webpack profile 展示的信息基本能分析出幾個拖慢構建速度的原因：

• 項目入口 entry 文件過多，導致 chunks 有 54 個
• 每個 chunk 引用模塊重復率很高，沒有公共模塊的提取
• jquery 和部分業務 js 體積過大被打包到最終的結果中
• scss 編譯，占用了部分時間，是整個編譯有個長時間的等待
• webpack 版本可以考慮升級

這就是接下來可以考慮優化的幾個方向。如果有興趣，可以看下：

webpack 優化：6 種方式讓構建時間達到秒級

我是怎么讓近一分鐘的構建，變成幾秒。

關于我

一位“前端工程師”，樂于實踐，并分享前端開發經驗。

如果有問題或者想法，歡迎各位評論留言，愿大家共同進步。

關注【前端雨爸】，查閱更多前端技術心得。

總結

以上是生活随笔為你收集整理的vs运行时 文本可视化工具 无法点开_webpack 优化：2 款工具帮你找到构建速度“变慢”的原因...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。