使用可視化圖表對 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. 總結

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