Angular 中的打包和代码分割

介绍

随着个人电脑和手机的处理能力越来越强，我们看到了客户端 Web 应用的兴起。使用 Angular 编写客户端应用时，务必考虑要交付到生产环境的整个 JavaScript 包的大小。交付的 Web 应用往往过于臃肿，其中包含的 JavaScript 远远多于其所需。过多的 JavaScript 会大大降低应用的速度，尤其是在应用的初始加载速度方面！

在本指南中，您将学习如何在 Angular 应用中配置捆绑，以便始终掌握捆绑包的大小。之后，您将学习处理大型应用的最佳策略之一：代码拆分或延迟加载。您将学习如何在应用中延迟加载模块和组件，以便用户仅下载他们需要的 JavaScript。

让我们开始吧。

使用 Angular CLI 配置你的 Bundle

要了解 Angular 应用中的捆绑工作原理，您只需查看angular.json文件即可。为 Angular 应用生成的angular.json文件是 Angular CLI 中包含的底层构建系统使用的配置文件。angular.json有很多不同的部分，但在本指南中，我们将重点介绍它提供的 JavaScript 捆绑配置选项。

配置生产包的第一步是设置构建大小警告。这可以使用angular.json中的预算字段来完成。预算字段位于 JSON 文件的生产配置部分。下面，您将找到 Angular 应用的默认生产配置。以下 JSON 设置应用的初始大小预算和任何组件样式文件的预算。

      ....
"budgets": [
    {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
    },
    {
        "type": "anyComponentStyle",
        "maximumWarning": "6kb",
        "maximumError": "10kb"
    }
]
....
    

如果最终的包大小达到 2 MB，此配置将传递构建警告；如果包大小达到 5 MB，则传递构建错误。对于任何组件样式文件的单个大小，它将执行相同的操作，但分别针对 6 KB 和 10 KB。这是一种非常强大的技术，可确保您可以根据特定团队或应用程序的需求配置大小限制。可以使用多种不同类型的预算。有关完整列表，请查看 Angular 文档的预算部分。

除了提供易于使用的 API 来帮助您控制包大小之外，angular.json文件还为您提供了一种将第三方脚本包含到包中的简便方法。这可以通过使用位于项目构建选项配置中的脚本字段轻松实现。下面，您将看到此字段的一个示例，它提取了一个外部 JavaScript 文件。该文件将包含在最终生产包中。

      ...
"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            ...
            "scripts": ['third-party-deps/external-script.js']
        },
...
    

angular.json文件可让您非常轻松地在包中包含外部脚本。如果您拥有高度定制的构建环境，这可以成为一种强大的机制，帮助组织和统一第三方依赖项的流程。

代码分割

因此，您已经了解了如何将脚本添加到您的包中以及如何配置构建中的警告和错误，以帮助保持您的包较小。但是，如果您的包必然很大怎么办？在本节中，您将学习如何利用 Angular 的代码拆分（延迟加载）API 来成功地将您的包拆分成更小、性能更高的块。

在 Angular 中，代码拆分是通过创建延迟加载模块来实现的。为了确保模块被延迟加载并拆分成自己的 JavaScript 块，您必须首先创建延迟加载路由。以下代码演示了 Angular 中的延迟加载路由。

      const routes: Routes = [
  {
    path: 'user-settings',
    loadChildren: () => import('./user-settings/user-settings.module').then(m => m.UserSettingsModule)
  }
];
    

此代码所做的第一件事是告诉 Angular CLI 将此模块拆分成自己的包。例如，如果上述路由是应用中唯一的延迟加载模块，那么在构建应用时，您将获得与主包一起创建的另一个较小的 JavaScript 块。由于此模块被分块到其自己的文件中，因此主包将更小。除此之外，上述代码还告诉 Angular RouterModule仅在用户导航到用户设置路径时加载UserSettingsModule。

这是一种强大的方法，可以对生产包进行分块，并确保初始绘制时间快速。延迟加载可确保用户不会一次性下载应用使用的所有 JavaScript，而是根据需要下载。

注意：在上面的例子中，您需要确保 UserSettingsModule不再导入到应用程序的根模块中。继续遵循路由最佳实践！有关更多信息，请参阅 Angular 延迟加载路由文档。

结论

在本指南中，您了解了有关 Angular 应用的打包的所有知识。您了解了如何使用angular.json文件的配置功能来配置您的打包。您了解了如何直接包含第三方 JavaScript 文件以及如何设置与打包大小相关的警告，以便随时了解打包情况。您还了解了处理必然较大的打包大小的主要策略，即延迟加载。您了解了如何将打包拆分成小块，然后可以延迟加载到您的应用中，以及如何使用此技术让您的应用更快、更易于用户使用。

我希望本指南能帮助您更深入地了解 Angular 应用中捆绑和代码拆分。有关延迟加载的更多信息，请查看相关的 Angular文档。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文