前言
在上兩章節中我們已經介紹過了 JavaScript 打包機制 以及 webpack 所有的內置配置，但當項目業務功能達到一定規模時，默認的配置已經不足以滿足開發、用戶的期望，我們就需要對 webpack 配置進行優化。
關於優化，有幾個基本規則：
- 首先知道要優化什么；
- 針對待優化點進行優化；
- 衡量優化前后對項目的影響；
如何知道具體該如何優化喃，最直觀的方式是分析它的輸出文件，但 webpack 打包后的文件非常大且可讀性差，下面就介紹幾種可視化的分析工具，幫助你快速定位問題所在。
一、測量構建時間
優化 webpack 構建速度的第一步是知道將精力集中在哪里。我們可以通過 speed-measure-webpack-plugin 測量你的 webpack 構建期間各個階段花費的時間：
步驟一：安裝 speed-measure-webpack-plugin
npm install speed-measure-webpack-plugin --save-dev
復制代碼步驟二：配置
// 分析打包時間 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); // ... module.exports = smp.wrap(prodWebpackConfig) 復制代碼
它能夠：
- 分析整個打包總耗時；
- 每個插件和 loader 的耗時情況；
方便開發人員定位打包耗時瓶頸。
二、分析包內容
webpack-bundle-analyzer 掃描 bundle 並構建其內部內容的可視化。使用此可視化來查找大的或不必要的依賴項。
步驟一：安裝 webpack-bundle-analyzer
npm install webpack-bundle-analyzer --save-dev
復制代碼步驟二：配置
// 分析包內容 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ // 開啟 BundleAnalyzerPlugin new BundleAnalyzerPlugin(), ], }; 復制代碼一般運行在生產版本中，該插件將在瀏覽器中打開統計信息結果頁面。
注意：webpack4 在 production 環境下默認啟動了 ModuleConcatenationPlugin （預編譯所有模塊到一個閉包中，提升代碼在瀏覽器中的執行速度），它可能會合並webpack-bundle-analyzer 輸出中的模塊的一部分，從而使報告不太詳細。 如果你使用此插件，請在分析過程中將其禁用。設置如下：
module.exports = { // ... optimization: { // concatenateModules: false, } }; 復制代碼具體來說，使用 webpack-bundle-analyzer 能可視化的反映：
- 打包出的文件中都包含了什么；
- 每個文件的尺寸在總體中的占比，哪些文件尺寸大，思考一下，為什么那么大，是否有替換方案，是否使用了它包含的所有代碼；
- 模塊之間的包含關系；
- 是否有重復的依賴項，是否存在一個庫在多個文件中重復？ 或者捆綁包中是否具有同一庫的多個版本？
- 是否有相似的依賴庫， 嘗試使用一種依賴庫實現相似的功能。
- 每個文件的壓縮后的大小。
三、在線分析工具
如果你對在本地安裝插件進行測量分析包方式感覺不爽的話，這里將會推薦幾款在線測量工具，但都需要 webpack 統計文件。
1. 生成統計文件 stats.json
使用 webpack 編譯源代碼時，用戶可以生成一個包含有關模塊統計信息的 JSON 文件。 這些統計信息可用於分析應用程序的依賴關系圖以及優化編譯速度。 該文件通常是按以下方式生成的：
在 webpack 啟動時帶入參數：--profile --json > stats.json ，例如：
webpack --config webpack.config.prod.js --profile --json > stats.json
復制代碼--profile：記錄下構建過程中的耗時信息--json：以 JSON 的格式輸出構建結果，最后只輸出一個.json文件，這個文件（stats.json）中包括所有構建相關的信息> stats.json：是 UNIX/Linux 系統中的管道命令、含義是把webpack --profile --json輸出的內容通過管道輸出到stats.json文件中
執行命令后，會在項目中多出一個 stats.json 文件，接下來將 stats.json 文件上傳到以下在線工具上，以可視化分析包的組成。
常用的在線工具有：
- 官方可視化分析工具 Webapck Analyse：生成一個圖表，讓你可視化了解項目的依賴關系、模塊大小及耗時等；
- Webpack Visualizer：生成一個餅狀圖，可視化 bundle 內容；
- webpack bundle optimize helper：此工具會分析你的 bundle，並為你提供可操作的改進措施建議，以減少 bundle 體積大小。
2. 官方可視化分析工具 Webapck Analyse
Webapck Analyse 是一個在線 Web 應用，它為你提供了對包的更全面的分析，並且它繪制了項目中所有依賴模塊的圖形，這對於依賴關系較少的項目非常有用。
打開 Webapck Analyse ，上傳 stats.json：
Webpack Analyse 不會把你選擇的 stats.json 文件發達到服務器，而是在瀏覽器本地解析，你不用擔心自己的代碼為此而泄露。 選擇文件后，你馬上就能如下的效果圖：
Modules ：展示所有的模塊，每個模塊對應一個文件。並且還包含所有模塊之間的依賴關系圖、模塊路徑、模塊ID、模塊所屬 Chunk、模塊大小；
Chunks ：展示所有的代碼塊，一個代碼塊中包含多個模塊。並且還包含代碼塊的ID、名稱、大小、每個代碼塊包含的模塊數量，以及代碼塊之間的依賴關系圖；
Assets ：展示所有輸出的文件資源，包括 .js、.css、圖片等。並且還包括文件名稱、大小、該文件來自哪個代碼塊；
Warnings ：展示構建過程中出現的所有警告信息；
Errors ：展示構建過程中出現的所有錯誤信息；
Hints ：展示處理每個模塊的過程中的耗時。
3. Webpack Visualizer 分析工具
可視化並分析您的Webpack捆綁包，以查看哪些模塊正在占用空間，哪些可能是重復的。
它既可作為插件使用，也可以在線使用，是一種較新的工具。
方式一：作為插件使用
npm install webpack-visualizer-plugin --dev-save
復制代碼配置：
// 分析包內容 const Visualizer = require('webpack-visualizer-plugin'); module.exports = { plugins: [ // 開啟 Visualizer // 默認輸出為 stats.html，這里為 statistics.html new Visualizer({ filename: './statistics.html' }) ], }; 復制代碼然后在瀏覽器中直接打開 statistics.html 就可以看到分析結果了：
方式二：在線使用
打開 chrisbateman.github.io/webpack-vis… ，上傳 stats.json 既可看到分析結果。
4. webpack bundle optimize helper 分析工具
打開 webpack.jakoblind.no/optimize/ ，上傳 stats.json 既可看到分析結果及優化建議：
四、總結
我們總共介紹了以下 5 種測量工具，每種工具都提供了對包分析的不同視角，例如：
- 在開發過程中，當向項目引入新包時，我個人經常使用 Webpack Visualizer ，餅狀圖給出了關於大小的比例的即時反饋；
- 在分析每次構建版本的耗時情況時，相對於其它
4中，speed-measure-webpack-plugin能夠獲取每個插件和 loader 的耗時情況，幫助你將注意力集中在需要優化的插件上； webpack-bundle-analyzer能夠將 bundle 內容展示為便捷的、交互式、可縮放的樹狀圖形式；- Webapck Analyse 相對於其它
4種，能夠對包進行全方位的分析； - 相對於其它
4種，webpack bundle optimize helper 能提供可操作的改進措施建議；
五、往期 webpack 系列
如果覺得不錯，就點個贊吧！👍👍👍
想看往期更過系列文章，點擊前往 github 博客主頁
作者：前端瓶子君
鏈接：https://juejin.im/post/5e39570bf265da573c0c6679
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。