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

问题描述

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

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?

推荐答案

2020 年更新:

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

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 -g source-map-explorer

或

yarn global add source-map-explorer

分析包大小:-

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

记住准备好源映射:它们可以通过使用 ng build --prod --sourceMap=true

Remember to have source maps ready: they can be obtained by building with ng build --prod --sourceMap=true

原始答案:
您可以使用 webpack-bundle-analyzer 来检查您的包.

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

使用analyze"修改您的package.json scripts 部分:ng build --prod --stats-json &&webpack-bundle-analyzer dist/stats.json"

modify your package.json scripts section with "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

npm run analysis

您可以查看这个 repo 它只是一个简单的 angular 应用程序，它演示了如何实现延迟加载，它已经按照上面的方式设置了 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 i source-map-explore -g
• 运行 [YOUR_PROJECT_NAME]:分析

更新:
如果您正在使用 nx 控制台(又名角度控制台)，现在它内置捆绑分析功能 还请记住stats.jsonpath 可能因@Klaster_1 在评论中声明的每个项目而不同.

UPDATE:
In case if you are using nx console (aka 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.

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