Angular CLI输出-如何分析捆绑文件 [英] Angular CLI output - how to analyze bundle files

问题描述

我正在使用Angular CLI使用--prod开关来构建用于生产的应用程序. 该捆绑包是在 dist 目录中创建的. 有没有办法知道在进行树式窃听和所有其他步骤之后实际上将哪些类和函数放入捆绑包中?

I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know which classes and functions have been actually put in the bundle after tree-shacking and all other steps?

推荐答案

您可以使用 webpack-bundle-analyzer 检查您的捆绑包.

You can use webpack-bundle-analyzer to inspect your bundles.

• npm install webpack-bundle-analyzer --save-dev

使用"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

npm run analyze

您可以签出 repo ，它只是一个简单的有角度的应用程序，演示如何实现延迟加载，并已设置 webpack-bundle-analyzer 如上所述.

You can checkout this repo it is just a simple angular app that demonstrates how to implement lazy loading and it has webpack-bundle-analyzer already setup as above.

您还可以配置Angular CLI 预算来监视捆绑包的大小.

Also you can configure Angular CLI budgets to monitor your bundles size.

更新:
此外，通过 @ ngx-builders/analyze ，您可以执行以下操作:

UPDATE:
Also with @ngx-builders/analyze you can do:

• ng添加@ ngx-builders/analyze
• npm我source-map-explore -g
• ng运行[YOUR_PROJECT_NAME]:分析

更新:
如果您使用的是角度控制台，现在它具有

UPDATE:
In case if you are using angular console now it has bundle analyzing feature built-in also bear in mind that stats.jsonpath might be different for each project stated by @Klaster_1 in comments.

UPDATE 2020:

UPDATE 2020:

角度小组强烈建议，而不是 webpack-bundle-analyzer ，仅使用 source-map-explorer 来分析您的捆绑包大小.他们说，webpack-bundle-analyzer和其他一些类似的工具没有提供与角度构建过程有关的实际信息.

The angular team strongly recommends to only use source-map-explorer to analyze your bundle size instead of webpack-bundle-analyzer. According to them, webpack-bundle-analyzer and a few other similar tools doesn't give the actual info pertaining to angular build process.

更多信息可以在 web.dev 中找到- https://youtu.be/B-lipaiZII8?t=215

More info can be fount at web.dev - https://youtu.be/B-lipaiZII8?t=215

要全局安装source-map-explorer:-

To install source-map-explorer globally:-

npm i source-map-explorer

或

yarn global add source-map-explorer

要分析捆绑大小:-

source-map-explorer dist/my-awesome-project/main.js

这篇关于Angular CLI输出-如何分析捆绑文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！