在Angular中预加载

Angular 中的预加载模块与 延迟加载 非常相似，只是在所有预先加载的模块都准备好后立即加载模块。 这消除了导航到延迟加载模块时可能出现的延迟，但仍然具有更快的初始加载应用程序的好处，因为初始模块首先被加载。

以下内容涵盖了 Angular 2+ 应用程序的预加载模块。

PreloadAllModules

进行预加载的默认方式是使用 PreloadAllModules 的预加载策略，这意味着所有可延迟加载的模块都将被预加载。 一旦你有延迟加载，它就很容易实现。

在您的应用程序模块中，导入 PreloadAllModules 以及其他路由器导入：

app.module.ts

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

现在在你的 NgModule 的导入中，指定预加载策略：

app.module.ts

imports: [
  ...
  RouterModule.forRoot(routes,
    { preloadingStrategy: PreloadAllModules })
],

你有它！ 现在将预加载所有可延迟加载的功能模块。

自定义预加载策略

如果您不希望所有延迟加载模块都被预加载，您可以实现自己的预加载策略。 当某些路由很少使用并且根本不需要预加载时，这可能很有用。

我们将定义并导出一个实现 PreloadingStrategy 的 CustomPreloading 类：

自定义预加载.ts

import { Observable } from 'rxjs/Observable';
import { PreloadingStrategy, Route } from '@angular/router';

为了实现我们的类，我们定义了一个 preload 方法，它接收路由信息和一个在模块应该被预加载时调用的函数。 方法本身应该返回一个 observable，因此我们在不应该预加载模块时返回 Observable.of(null)。

---

现在在我们的应用模块中，我们导入我们的预加载策略类，提供它，然后告诉 RouterModule.forRoot ：

app.module.ts

// ...
import { routes } from './routes';
import { CustomPreloading } from './custom-preloading';

路线

我们的路由可以设置类似这样的东西，为应该预加载的模块提供一个带有 preload: true 的数据对象：

路线.ts

import { DashboardComponent } from './dashboard/dashboard.component';

import { Routes } from '@angular/router';

与延迟加载一样，您可以前往 DevTools 的网络选项卡以验证块是否已加载并且预加载是否正常工作。