天天看點

如何以可視化方式顯示 Angular 應用建構後的 bundle 檔案大小

在 package.json 檔案裡定義如下腳本執行:

如何以可視化方式顯示 Angular 應用建構後的 bundle 檔案大小

上面的腳本,首先執行 yarn build.

這個 build 的目标是 storefrontapp 應用。但是在此之前,需要先建構所有的 libs,包含 feature libs 和 integration libs.

如何以可視化方式顯示 Angular 應用建構後的 bundle 檔案大小

這個指令執行完之後,在 dist/storefrontapp 檔案夾下面,會生成一個巨大的 stats.json 檔案,包含了統計結果。

然後執行 npx 指令,使用 webpack-bundle-analyzer 顯示出結果。檔案尺寸越大的 bundle 檔案,在顯示結果裡的圖示也越大:

如何以可視化方式顯示 Angular 應用建構後的 bundle 檔案大小

繼續閱讀