設想一個場景，假如需要提升 webpack 編譯速度，或者優化編譯產物大小，應該從何下手？別急，在採用具體手段前，可以先花點時間瞭解當前的編譯執行情況，確定性能瓶頸，有的放矢！今天就給大家分享一些 webpack 構建過程的分析診斷方法和工具，基於這些工具，你可以：

• 瞭解編譯產物由那些模塊資源組成

• 瞭解模塊之間的依賴關係

• 瞭解不同模塊的編譯構建速度

• 瞭解模塊在最終產物的資源佔比

• 等等

收集統計信息

Webpack 運行過程會收集各種統計信息，只需要在啓動時附加 --json 參數即可獲得：

npx webpack --json > stats.json

上述命令運行後，會在文件夾下輸出 stats.json 文件，文件內容主要包含：

{
  "hash": "2c0b66247db00e494ab8",
  "version": "5.36.1",
  "time": 81,
  "builtAt": 1620401092814,
  "publicPath": "",
  "outputPath": "/Users/tecvan/learn-webpack/hello-world/dist",
  "assetsByChunkName": { "main": ["index.js"] },
  "assets": [
    // ...
  ],
  "chunks": [
    // ...
  ],
  "modules": [
    // ...
  ],
  "entrypoints": {
    // ...
  },
  "namedChunkGroups": {
    // ...
  },
  "errors": [
    // ...
  ],
  "errorsCount": 0,
  "warnings": [
    // ...
  ],
  "warningsCount": 0,
  "children": [
    // ...
  ]
}

通常，分析構建性能時主要關注如下屬性：

• 「assets」 ：編譯最終輸出的產物列表

• 「chunks」 ：構建過程生成的 chunks 列表，數組內容包含 chunk 名稱、大小、依賴關係圖

• 「modules」 ：本次運行觸達的所有模塊，數組內容包含模塊的大小、所屬 chunk、分析耗時、構建原因等

• 「entrypoints」 ：entry 列表，包括動態引入所生產的 entry 項也會包含在這裏面

• 「namedChunkGroups」 ：chunks 的命名版本，內容相比於 chunks 會更精簡

• 「errors」 ：構建過程發生的所有錯誤信息

• 「warnings」 ：構建過程發生的所有警告信息

基於這些屬性，我們可以分析出模塊的依賴關係、模塊佔比、編譯耗時等信息，不過這裏大致瞭解原理就行了，社區已經爲我們提供了非常多事半功倍的分析工具。

可視化分析工具

Webpack Analysis

Webpack Analysis 是 webpack 官方提供的可視化分析工具，相比於其它工具，它提供的視圖更全，功能更強大，使用上只需要將上一節 webpack --json > stats.json 命令生成的 stats.json 文件拖入頁面，就可以獲得一系列分析視圖：

點擊 「modules/chunks/assets」 按鈕，頁面會渲染出對應依賴關係圖，例如點擊 「modules」：

除 「modules/chunks/assets」 外，右上方菜單欄 「Hints」 還可以查看構建過程各階段、各模塊的處理耗時，可以用於分析構建的性能瓶頸：

❝

不過，實測發現 「Hints」 還不支持 webpack 5 版本的產出，等待官方更新吧。

❞

Webpack Analysis 提供了非常齊全的分析視角，信息幾乎不失真，但這也意味着上手難度更高，信息噪音也更多，所以社區還提供了一個簡化版 webpack-deps-tree，用法相似但用法更簡單、信息更清晰，讀者可以根據實際場景對比交叉使用。

Webpack Visualizer

Webpack Visualizer 是一個在線分析工具，同樣只需要將 stats.json 文件拖入頁面，就可以從文件夾到模塊逐層看到 bundle 的組成：

❝

除了在線版本外，Webpack Visualizer 還提供了插件版本的 webpack-visualizer-plugin 工具，但是這個插件年久失修，只兼容 webpack 1.x ，所以現在幾乎沒有使用價值了。

❞

此外，在線工具 Webpack Chart 也提供了類似的功能，功能重合度很高，這裏就不展開講了。

Webpack Bundle Analyzer

webpack-bundle-analyzer 是一個 webpack 插件，只需要簡單的配置就可以在 webpack 運行結束後獲得 treemap 形態的模塊分佈統計圖，用戶可以仔細對比 treemap 內容推斷是否包含重複模塊、不必要的模塊等場景，例如：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

module.exports = {
  ...
  plugins: [new BundleAnalyzerPlugin()],
};

編譯結束後，默認自動打開本地視圖頁面：

此外，webpack-bundle-size-analyzer 也提供了類似，但是基於命令行視圖的分析功能，可以基於 webpack-bundle-size-analyzer 做一些自動分析、自動預警功能。

Webpack Dashboard

webpack-dashboard 是一個命令行可視化工具，能夠在編譯過程中實時展示編譯進度、模塊分佈、產物信息等，與 webpack-bundle-size-analyzer 類似，它也只需要一些簡單的改造就能運行，首先需要註冊插件：

const DashboardPlugin = require("webpack-dashboard/plugin");

module.exports = {
  // ...
  plugins: [new DashboardPlugin()],
};

其次，修改 webpack 的啓動方式，例如原來的啓動命令可能是：

"scripts": {
    "dev": "node index.js", # OR
    "dev": "webpack-dev-server", # OR
    "dev": "webpack",
}

需要修改爲：

"scripts": {
    "dev": "webpack-dashboard -- node index.js", # OR
    "dev": "webpack-dashboard -- webpack-dev-server", # OR
    "dev": "webpack-dashboard -- webpack",
}

之後，就可以在命令行看到一個漂亮的可視化界面：

UnusedWebpackPlugin

最後分享 UnusedWebpackPlugin 插件，它能夠根據 webpack 統計信息，反向查找出工程項目裏那些文件沒有被用到，我日常在各種項目重構工作中都會用到，非常實用。用法也比較簡單：

const UnusedWebpackPlugin = require("unused-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new UnusedWebpackPlugin({
      directories: [path.join(__dirname, "src")],
      root: path.join(__dirname, "../"),
    }),
  ],
};

示例中，directories 用於指定需要分析的文件目錄；root 用於指定根路徑，與輸出有關。配置插件後，webpack 每次運行完畢都會輸出 directories 目錄中，有那些文件沒有被用到：

總結

工欲善其事，必先利其器！上面分享的工具都在解決相似的問題 —— 構建分析，只是具體的側重點、用法、交互形態略有不同，讀者可以結合實際場景，擇優選用。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/A0udBhvNoA0o-kX1B0rt9A