分享幾個 Webpack 實用分析工具
全文 1500 字，閱讀時長約 15 分鐘。如果覺得文章有用，歡迎點贊關(guān)注，但寫作實屬不易，未經(jīng)作者同意，禁止任何形式轉(zhuǎn)載！！！?
設想一個場景，假如需要提升 webpack 編譯速度，或者優(yōu)化編譯產(chǎn)物大小，應該從何下手？別急，在采用具體手段前，可以先花點時間了解當前的編譯執(zhí)行情況，確定性能瓶頸，有的放矢！今天就給大家分享一些 webpack 構(gòu)建過程的分析診斷方法和工具，基于這些工具，你可以：
了解編譯產(chǎn)物由那些模塊資源組成 了解模塊之間的依賴關(guān)系 了解不同模塊的編譯構(gòu)建速度 了解模塊在最終產(chǎn)物的資源占比 等等
收集統(tǒng)計信息
Webpack 運行過程會收集各種統(tǒng)計信息，只需要在啟動時附加 --json 參數(shù)即可獲得：
npx webpack --json > stats.json
上述命令運行后，會在文件夾下輸出 stats.json 文件，文件內(nèi)容主要包含：
{
"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": [
// ...
]
}
通常，分析構(gòu)建性能時主要關(guān)注如下屬性：
「assets」 ：編譯最終輸出的產(chǎn)物列表 「chunks」 ：構(gòu)建過程生成的 chunks 列表，數(shù)組內(nèi)容包含 chunk 名稱、大小、依賴關(guān)系圖 「modules」 ：本次運行觸達的所有模塊，數(shù)組內(nèi)容包含模塊的大小、所屬chunk、分析耗時、構(gòu)建原因等 「entrypoints」 ：entry 列表，包括動態(tài)引入所生產(chǎn)的 entry 項也會包含在這里面 「namedChunkGroups」 ：chunks 的命名版本，內(nèi)容相比于 chunks 會更精簡 「errors」 ：構(gòu)建過程發(fā)生的所有錯誤信息 「warnings」 ：構(gòu)建過程發(fā)生的所有警告信息
基于這些屬性，我們可以分析出模塊的依賴關(guān)系、模塊占比、編譯耗時等信息，不過這里大致了解原理就行了，社區(qū)已經(jīng)為我們提供了非常多事半功倍的分析工具。
可視化分析工具
Webpack Analysis
Webpack Analysis 是 webpack 官方提供的可視化分析工具，相比于其它工具，它提供的視圖更全，功能更強大，使用上只需要將上一節(jié) webpack --json > stats.json 命令生成的 stats.json 文件拖入頁面，就可以獲得一系列分析視圖：
點擊 「modules/chunks/assets」 按鈕，頁面會渲染出對應依賴關(guān)系圖，例如點擊 「modules」：
除 「modules/chunks/assets」 外，右上方菜單欄 「Hints」 還可以查看構(gòu)建過程各階段、各模塊的處理耗時，可以用于分析構(gòu)建的性能瓶頸：
?不過，實測發(fā)現(xiàn) 「Hints」 還不支持 webpack 5 版本的產(chǎn)出，等待官方更新吧。
?
Webpack Analysis 提供了非常齊全的分析視角，信息幾乎不失真，但這也意味著上手難度更高，信息噪音也更多，所以社區(qū)還提供了一個簡化版 webpack-deps-tree，用法相似但用法更簡單、信息更清晰，讀者可以根據(jù)實際場景對比交叉使用。
Webpack Visualizer
Webpack Visualizer 是一個在線分析工具，同樣只需要將 stats.json 文件拖入頁面，就可以從文件夾到模塊逐層看到 bundle 的組成：
?除了在線版本外，Webpack Visualizer 還提供了插件版本的 webpack-visualizer-plugin 工具，但是這個插件年久失修，只兼容 webpack 1.x ，所以現(xiàn)在幾乎沒有使用價值了。
?
此外，在線工具 Webpack Chart 也提供了類似的功能，功能重合度很高，這里就不展開講了。
Webpack Bundle Analyzer
webpack-bundle-analyzer 是一個 webpack 插件，只需要簡單的配置就可以在 webpack 運行結(jié)束后獲得 treemap 形態(tài)的模塊分布統(tǒng)計圖，用戶可以仔細對比 treemap 內(nèi)容推斷是否包含重復模塊、不必要的模塊等場景，例如：
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
...
plugins: [new BundleAnalyzerPlugin()],
};
編譯結(jié)束后，默認自動打開本地視圖頁面：
此外，webpack-bundle-size-analyzer 也提供了類似，但是基于命令行視圖的分析功能，可以基于 webpack-bundle-size-analyzer 做一些自動分析、自動預警功能。
Webpack Dashboard
webpack-dashboard 是一個命令行可視化工具，能夠在編譯過程中實時展示編譯進度、模塊分布、產(chǎn)物信息等，與 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 插件，它能夠根據(jù) webpack 統(tǒng)計信息，反向查找出工程項目里那些文件沒有被用到，我日常在各種項目重構(gòu)工作中都會用到，非常實用。用法也比較簡單：
const UnusedWebpackPlugin = require("unused-webpack-plugin");
module.exports = {
// ...
plugins: [
new UnusedWebpackPlugin({
directories: [path.join(__dirname, "src")],
root: path.join(__dirname, "../"),
}),
],
};
示例中，directories 用于指定需要分析的文件目錄；root 用于指定根路徑，與輸出有關(guān)。配置插件后，webpack 每次運行完畢都會輸出 directories 目錄中，有那些文件沒有被用到：
總結(jié)
工欲善其事，必先利其器！上面分享的工具都在解決相似的問題 —— 構(gòu)建分析，只是具體的側(cè)重點、用法、交互形態(tài)略有不同，讀者可以結(jié)合實際場景，擇優(yōu)選用。