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

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

1. Webpack 2 的編譯統(tǒng)計信息生成

讓 Webpack 2 生成統(tǒng)計信息的參數(shù)主要是配置以下兩個。

  • --profile 統(tǒng)計生成至執(zhí)行時間相關信息，可選參數(shù)；

  • --json 讓 Webpack 生成統(tǒng)計信息，輸出格式為 json。

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

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

配置后在命令行執(zhí)行命令 npm run stats 即可在項目目錄中看到生成的統(tǒng)計文件 stats.json。

2. 利用生成的數(shù)據(jù)生成可視化圖表

2.1 官方可視化分析工具

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

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

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

2.2 Webpack Visualizer

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

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

2.3 重復包的檢測與圖表化

可以安裝 duplicate-package-checker-webpack-plugin 插件對項目中的重復包進行檢測，以便于對項目進行引用優(yōu)化。

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

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

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

2.4 未使用資源檢測

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

2.5 3D 圖表生成

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

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

2.6 一些其他工具

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

一個用于生成包依賴關系的可視化工具，可以用于圖表化地查看包之間的循環(huán)依賴之類的信息。

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

3. 總結

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

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


作者：Parry 
出處：http://www.cnblogs.com/parry/ 
本文版權歸作者和博客園共有，歡迎轉載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

http://www.cnblogs.com/parry/p/webpack2-Statistics.html