此文是「Webpack 2 視頻教程」的第十八集的補充文字文檔，主要對使用可視化圖表對 Webpack 2 的編譯與打包進行統計分析進行了詳細地講解，供您更加直觀地參考。

在之前更新的共十七集「Webpack 2 視頻教程」中，我們陸續講解了 Webpack 2 從配置到打包、壓縮優化到調試狀態等情況都進行了詳細地講解，在這一小節，我們通過可視化的圖表對 Webpack 2 的打包編譯過程進行一個更加深刻地認識，同時可視化圖表也是對項目概況以及優化指導是一個非常直觀的方案。

1. Webpack 2 的編譯統計信息生成

讓 Webpack 2 生成統計信息的參數主要是配置以下兩個。

• --profile 統計生成至執行時間相關信息，可選參數；
• --json 讓 Webpack 生成統計信息，輸出格式為 json。

以下為測試項目 package.json 中的配置截圖。

配置後在命令行執行命令 npm run stats 即可在項目目錄中看到生成的統計文件 stats.json。

2. 利用生成的數據生成可視化圖表

2.1 官方可視化分析工具

官方就給出了一個可視化工具，地址在 http://webpack.github.io/analyse/，選擇上面生成的 stats.json 文件後即可生成針對項目生成的可視化圖表。

在此圖表中你可以看到你項目的生成文件的大小、引用關係以及項目中 modules 的相關信息。

2.2 Webpack Visualizer

同樣也是一個 Web 生成工具，選擇上傳生成的 stats.json 文件即可生成圖表。

2.3 重覆包的檢測與圖表化

可以安裝 duplicate-package-checker-webpack-plugin 插件對項目中的重覆包進行檢測，以便於對項目進行引用優化。

當然，你可以直接利用之前生成的數據文件直接生成一個更加炫酷的圖形化統計信息。
https://alexkuz.github.io/webpack-chart/

2.4 未使用資源檢測

使用 https://www.npmjs.com/package/webpack-unused 還可以檢測項目中那些資源文件沒有被使用，供後期優化項目參考。

2.5 3D 圖表生成

還有一個可以生成 3D 圖標的工具，不過看起來信息太過混亂，當玩具玩玩就好。
https://alexkuz.github.io/stellar-webpack/

2.6 一些其他工具

可以在本地裝一個組件，生成可以放大縮小的資源占用圖標。
https://www.npmjs.com/package/webpack-bundle-analyzer

一個用於生成包依賴關係的可視化工具，可以用於圖表化地查看包之間的迴圈依賴之類的信息。

3. 總結

這些可視化的工具可以供後期優化項目時大大提高尋找優化目標的效率。
不過所有的性能問題以及包依賴的準則應該一直貫穿於整個項目的開發過程中，而不是指望最後再來優化項目依賴混亂等問題，免得積重難返。

課程中的源碼地址：https://github.com/ParryQiu/DevOpenClub-Tech-Webpack2