在 package.json 文件里定義如下腳本執(zhí)行：

"build:analyze": "yarn build --stats-json && npx --yes webpack-bundle-analyzer dist/storefrontapp/stats.json",

上面的腳本，首先執(zhí)行 yarn build.

這個(gè) build 的目標(biāo)是 storefrontapp 應(yīng)用。但是在此之前，需要先構(gòu)建所有的 libs，包含 feature libs 和 integration libs.

這個(gè)命令執(zhí)行完之后，在 dist/storefrontapp 文件夾下面，會(huì)生成一個(gè)巨大的 stats.json 文件，包含了統(tǒng)計(jì)結(jié)果。

然后執(zhí)行 npx 命令，使用 webpack-bundle-analyzer 顯示出結(jié)果。文件尺寸越大的 bundle 文件，在顯示結(jié)果里的圖標(biāo)也越大：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的如何以可视化方式显示 Angular 应用构建后的 bundle 文件大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。