美文网首页
如何以可视化方式显示 Angular 应用构建后的 bundle

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

作者: _扫地僧_ | 来源:发表于2021-12-16 09:06 被阅读0次

    在 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的原创文章,尽在:"汪子熙":


    相关文章

      网友评论

          本文标题:如何以可视化方式显示 Angular 应用构建后的 bundle

          本文链接:https://www.haomeiwen.com/subject/emrjtrtx.html