在本指南中，您将学习如何减少 Angular 应用程序的生产包大小。Angular 是一个非常固执己见且强大的框架。因此，与使用其他 JavaScript 框架（如 React）编写的应用程序相比，Angular 应用程序的包大小通常更大。Angular 框架附带了许多有用的库，例如 RxJs 和 Zone.js。牢记这一点，掌握生产包的大小对您来说非常重要。那么你该怎么做呢？在本指南中，您将获得以下策略的高级概述，这些策略将有助于减轻生产包的大小：

• 调整导入
• 延迟加载
• 更新到最新的 Angular 版本

让我们开始吧！

ES6 模块系统最大的优势之一是它使 JavaScript 打包器能够对打包文件进行 tree-shake 操作，或者说，从打包文件中移除未使用的死代码。在调整导入时，您可以遵循一个循序渐进的过程，以便在打包文件大小方面获得最大收益。

第一步是分析当前包的大小。目前，使用 Angular 时执行此操作的最佳方法是使用webpack-bundle-analyzer库。此库会启动一个服务器，让您直观地了解生产包。使用此库，您可以判断哪些包是大小最大的罪魁祸首。

现在您已经分析了您的软件包并找到了您想要尝试调整的软件包，下一步是确定此软件包是否正在使用 ES6 导入。 如果该软件包正在使用 ES6 导入，您可以在 Angular 构建中利用 tree-shaking，方法是将针对整个库的模块导入更改为import { last } from 'lodash'改为默认的导入等效项：import last from 'lodash/last'。 上述更改将确保您不会将整个lodash库都包含在您的软件包中，而只包含最后一个函数执行所需的库部分。 这会将您的生产软件包大小从千字节转换为字节！

唯一的问题是，您使用的软件包必须拆分成 ES6 模块。如果软件包不使用 ES6 导入，您可以下载另一个软件包，该软件包确实利用了这一令人兴奋的 JavaScript 功能。例如，lodash提供了一个替代方案—— lodash-es ——它利用了这一令人兴奋的功能。

调整导入可以减少生产包中的大量 JavaScript，因为它可以确保您只将所需的 JavaScript 导入到应用中。关于这个主题已经写了一整本指南。如需深入了解，请查看此Pluralsight 指南。

有时您的应用很大，而且没有其他解决方法。例如，Facebook 就是个例子。Facebook 是一款功能和用户众多的大型应用。当您的应用具有类似数量的功能或使用非常大的所需库（例如 Cesium 等 3-D 映射库）时，您需要使用其他策略来保持应用快速运行并减小生产包大小。

延迟加载是一项关键策略，它使您可以将生产包分成几个部分。 您不再需要一个类似于main.bundle.js - 5mb 的大型生产包，而是拥有许多较小的“块”。 例如，在为三个功能模块实现延迟加载后，您的构建将生成可能如下所示的 JavaScript，具体取决于您的模块和应用的大小：

这是一种非常有效的方法，可以降低生产包的大小并确保您的应用无论大小都能快速加载。幸运的是，在 Angular 中实现延迟加载非常简单！它通过实现延迟加载的路由和模块来实现。

有关该主题的更多技术深度和代码示例，请参阅本Pluralsight 指南的“代码拆分”部分。

减少包大小的最直接方法是确保使用最新版本的 Angular 框架。从版本 9 开始，Angular 开始使用新的 Ivy 编译器。Ivy 编译器在应用程序构建阶段的渲染和编译部分引入了许多优化。这些优化可以使应用程序运行更快，生产包大小更小——只需升级 Angular 即可！下面列出了使用 Ivy 编译器的部分好处：

• 更小的生产包
• 构建时间更快
• 更快的单元测试
• 改进了调试功能，包括 HTML 中的断点
• 更有效的类型检查

保持最新版本意味着您可以引入所有可用的最新优化。此外，Angular 还提供了通过 Angular CLI 的ng update命令进行升级的简便途径。深入了解ng update命令的内部工作原理超出了本指南的范围，但 Angular 提供了一个非常有用的升级指南，可以帮助您升级到最新版本。

在本指南中，您学习了三种减少 Angular 应用生产包大小的策略。首先，您学习了如何分析包大小和调整导入，以利用 Angular 构建系统的摇树功能。接下来，您学习了延迟加载如何将大包分成小块，以及如何让您的应用性能更快、加载速度更快。最后，您学习了如何通过保持最新 Angular 版本来确保您能够利用框架提供的最新和最出色的包优化。

我希望本指南能帮助您了解一些最突出和关键的策略，以减少生产 Angular 应用程序的大小。