如何以可视化方式显示 Angular 应用构建后的 bundle

在 package.json 文件里定义如下脚本执行：

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

上面的脚本，首先执行 yarn build.

这个 build 的目标是 storefrontapp 应用。但是在此之前，需要先构建所有的 libs，包含 feature libs 和 integration libs.

这个命令执行完之后，在 dist/storefrontapp 文件夹下面，会生成一个巨大的 stats.json 文件，包含了统计结果。

然后执行 npx 命令，使用 webpack-bundle-analyzer 显示出结果。文件尺寸越大的 bundle 文件，在显示结果里的图标也越大：

更多Jerry的原创文章，尽在："汪子熙":