如何减小产品捆束尺寸？

如果您使用的是Angular 8+，并且想要减小捆绑包的大小，则可以使用Ivy。Ivy是Angular 9中的默认视图引擎。只需转到src / tsconfig.app.json并添加angularCompilerOptions参数即可，例如：

{
  "extends": ...,
  "compilerOptions":...,
  "exclude": ...,

/* add this one */ 
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

检查您是否已将ng build --prod的配置命名为“ production”，因为它是ng build --configuration = production的简写。 没有答案解决了我的问题，因为问题就在屏幕前。我认为这可能很普遍...我已经通过i18n将所有配置重命名为Production-en来使该应用程序国际化。然后，我假设使用ng build --prod进行了构建，并使用了默认优化，并且应该接近最佳优化，但实际上仅执行了ng build，导致7mb捆绑包而不是250kb。

如果您已运行ng build --prod-完全不应该有vendor文件。

如果我只是运行ng build-我得到以下文件：

该文件夹的总大小约为14MB。哇！：D

但是，如果我运行ng build --prod-我会得到以下文件：

文件夹的总大小为584K。

一个和相同的代码。在这两种情况下，我都启用了常春藤。角度为8.2.13。

所以-我猜您没有添加--prod到构建命令中？

在我看来，这确实减小了尺寸：

ng build --prod --build-optimizer --optimization.

对于Angular 5+ ng-build --prod默认情况下会这样做。运行此命令后的大小从1.7MB减小到1.2MB，但不足以满足我的生产目的。

我在facebook Messenger平台上工作，并且Messenger应用程序需要小于1MB才能在Messenger平台上运行。一直在努力寻找有效的摇树方法，但仍然没有运气。

我有一个角5 +弹簧启动应用程序（application.properties 1.3+）借助压缩（下面的链接）能够将main.bundle.ts的大小从2.7 MB减少到530 KB。

同样，默认情况下，--aot和--build-optimizer是通过--prod模式启用的，无需分别指定它们。

https://stackoverflow.com/a/28216983/9491345

减少捆绑的另一种方法是提供GZIP而不是JS。我们从2.6mb到543ko。

https://httpd.apache.org/docs/2.4/mod/mod_deflate.html

2020年2月更新

由于这个答案吸引了很多人，我认为最好用更新的Angular优化来更新它：

1. 就像另一个回答者所说的，ng build --prod --build-optimizer对于使用少于Angular v5的人来说是一个不错的选择。对于较新的版本，默认情况下使用ng build --prod
2. 另一个选择是使用模块分块/延迟加载来更好地将应用程序拆分为较小的块
3. Ivy渲染引擎默认在Angular 9中提供，它提供了更好的捆绑包大小
4. 确保您的第三方部门可摇树。如果您尚未使用Rxjs v6，则应该使用。
5. 如果所有其他方法均失败，请使用诸如webpack-bundle-analyzer之类的工具查看导致模块膨胀的原因
6. 检查文件是否已压缩

一些人声称使用AOT编译可以将供应商捆绑包大小减小到250kb。但是，在BlackHoleGalaxy的示例中，他使用AOT编译，并且仍然保留2.75MB的供应商捆绑包大小，ng build --prod --aot比假定的250kb大10倍。即使您使用的是v4.0，这也不是angular2应用程序的常识。对于任何真正关心性能的人（尤其是在移动设备上），2.75MB的容量仍然太大。

您可以采取一些措施来提高应用程序的性能：

1）AOT和Tree Shaking（angular-cli开箱即用）。在生产和开发环境中，默认情况下使用Angular 9 AOT。

2）使用Angular Universal AKA服务器端渲染（不在cli中）

3）Web Workers（同样，不是在cli中，而是一个非常需要的功能），
请参见：https : //github.com/angular/angular-cli/issues/2305

4）服务人员
请参阅：https：//github.com/angular/angular-cli/issues/4006

您可能不需要在单个应用程序中全部使用这些功能，但是这些是当前用于优化Angular性能的一些选项。我相信/希望Google在性能方面意识到开箱即用的缺点，并计划在未来进行改进。

这是一个参考，更深入地讨论了我上面提到的一些概念：

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

首先，供应商捆绑包之所以庞大是因为Angular 2依赖于许多库。Angular 2应用的最小大小约为500KB（在某些情况下为250KB，请参阅底部文章）。
树木适当地使用了摇树angular-cli。
不要不包括.map文件，因为只有用于调试。此外，如果您使用热更换模块，请卸下它以减轻供应商的负担。

为了进行生产打包，我个人使用Webpack（而且angular-cli也依赖于Webpack），因为您确实可以configure everything进行优化或调试。
如果您想使用Webpack，我同意它的初学者有点棘手，但请参阅网上的教程，不会感到失望。
否则，请使用angular-cli，它可以很好地完成工作。

必须使用提前编译才能优化应用程序，并将Angular 2应用程序缩小到250KB。

这是我创建的一个回购协议（github.com/JCornat/min-angular），用于测试最小的Angular bundle大小，我得到384kB。我相信有一种简单的方法可以对其进行优化。

在使用AngularClass / angular-starter配置谈论大型应用程序时，与上面的存储库相同，大型应用程序（150多个组件）的捆绑包大小从8MB（无映射文件的4MB）增加到580kB。

Use latest angular cli version and use command ng build --prod --build-optimizer It will definitely reduce the build size for prod env.

This is what the build optimizer does under the hood:

The build optimizer has two main jobs. First, we are able to mark parts of your application as pure,this improves the tree shaking provided by the existing tools, removing additional parts of your application that aren’t needed.

The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

注意：Angular 5及更高版本的一个更新，将ng build --prod自动完成上述过程:)

我想分享的一件事是导入的库如何增加dist的大小。我已经导入了angular2-moment软件包，但是我可以使用从@ angular / common导出的标准DatePipe进行我需要的所有日期时间格式化。

使用Angular2-Moment "angular2-moment": "^1.6.0",

块{0} polyfills.036982dc15bb5fc67cb8.bundle.js（polyfills）191 kB {4} [initial] [rendered]块{1} main.e7496551a26816427b68.bundle.js（main）2.2 MB {3} [initial] [rendered]块{2} styles.056656ed596d26ba0192.bundle.css（样式）69个字节{4} [initial] [rendered]块{3} vendor.62c2cfe0ca794a5006d1.bundle.js（供应商）3.84 MB [initial] [rendered]块{4 } inline.0b9c3de53405d705e757.bundle.js（内联）0个字节[输入] [呈现]

删除Angular2-moment并改用DatePipe之后

块{0} polyfills.036982dc15bb5fc67cb8.bundle.js（polyfills）191 kB {4} [initial] [rendered]块{1} main.f2b62721788695a4655c.bundle.js（main）2.2 MB {3} [initial] [rendered]块{2} styles.056656ed596d26ba0192.bundle.css（样式）69字节{4} [initial] [rendered]块{3} vendor.e1de06303258c58c9d01.bundle.js（供应商）3.35 MB [initial] [rendered]块{4 } inline.3ae24861b3637391ba70.bundle.js（内联）0个字节[输入] [呈现]

请注意，供应商捆绑包减少了一半兆字节！

值得一提的是，即使您已经熟悉外部库，也值得检查一下角度标准软件包可以做什么。