预加载所有 Angular Bundle

用户希望应用运行速度快。在用户需要之前，尽快将 JavaScript 包加载到浏览器中，可以极大地提升用户体验。了解如何提升用户体验至关重要。

提升 Angular 应用用户体验的一种方法就是策略性地选择需要预加载的 bundles。您可以控制 bundles 的加载时间以及加载哪些 bundles。因此，您应该尝试选择内置的 Angular 预加载策略，或者创建自定义的 Angular 预加载策略。

在本系列中，我们将探讨预加载 Angular 包的一些选项。

以下是本系列文章

预加载全部

Angular 的默认预加载策略是开箱即用，不进行预加载。因此，如果你想进行预加载，你必须更改该行为。

你可以使用内置的预加载策略来告诉 Angular 提前预加载所有惰性加载的模块PreloadAllModules。只需导入它即可@angular/router，如下所示。

import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

然后在设置时RouterModule，将包括在内的路由器选项传递preloadingStrategy给该forRoot()功能。

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

试用

现在使用重新构建并运行你的应用ng serve。打开浏览器，打开开发者工具，然后前往http://localhost:4200。当你在浏览器中检查“网络”选项卡时，你会看到所有 bundles 都已预加载。

现在，当您导航到惰性加载的 bundles 时，您会看到它们已经加载完毕，因此体验非常快。如果您希望真正看到这一点，请在开发者工具中启用限流功能，使用较慢的网络（例如 3G），然后刷新页面。现在，在“网络”选项卡中，预加载的效果会更加明显。

决定什么适合你的应用

现在您知道了如何使用内置PreloadAllModules策略，那么您如何评估这是否适合您的应用呢？这取决于您的具体情况。

如果您的应用有多个延迟加载的 bundles，并且每个 bundles 都很大，那么这些 bundles 都会在应用加载时开始传输到您的浏览器中。您无法控制哪些 bundles 先加载，因此如果用户点击某个路由，它很可能不会是第一个预加载的。

如果您的用户很少访问某些路线，该怎么办？预先加载所有路线是否有意义？

如果您认为用户可以从预先加载的所有路线中受益，这可能是一个不错的选择。

最终决定权在你手中。我建议在选择此选项或任何预加载策略之前，先在各种有效且常见的用户工作流程下，以不同的网络速度进行测试。这些数据将帮助你判断这是否适合你，或者是否有其他策略可能对你的应用用户更有利。

资源

获取VS Code
获取 VS Code Angular Essentials
获取 VS Code Angular 代码片段

鏂囩珷鏉ユ簮锛�https://dev.to/angular/preload-all-angular-bundles-1b6l