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

在之前更新的共十七集「Webpack 2 視頻教程」中,我們陸續(xù)講解了 Webpack 2 從配置到打包、壓縮優(yōu)化到調(diào)試狀態(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

網(wǎng)友評論