如何预加载所有Angular Bundle？

预加载简介： Angular中的“延迟加载”功能的引入极大地提高了应用程序的性能。延迟加载有助于使初始包大小更小，从而有助于减少加载时间。但是，延迟加载的主要问题在于，当用户浏览(或到达)应用程序的延迟加载部分时，路由器必须从服务器获取所需的模块，这可能需要花费时间。

因此，即使减少了应用程序的初始加载时间，最终用户也必须等待一段时间，直到路由器获取该特定模块。为了解决这个问题，Angular提出了预加载的概念。有了此功能，可延迟加载的模块将被预加载，因此用户不必等待它被提取。当用户与延迟加载过程中已加载的应用程序进行交互时，将发生此预加载。

方法：基本方法是根据需要设置预加载策略。我们需要通过在app-routing.module.ts中明确提及来指定要预加载所有模块

abstract class PreloadingStrategy {
abstract preload(route: Route, fn: () => Observable): Observable
}

步骤：要预加载所有模块，只需遵循以下步骤：

• 从app-routing.module.ts添加PreloadAllModules的导入语句
  句法：

  import { NgModule } from ‘@angular/core’;
  import { RouterModule, Routes, PreloadAllModules } from ‘@angular/router’;

• 在app-routing.module.ts中设置RouterModule时，将包括preloadingStrategy在内的路由器选项传递给forRoot()函数。
  这将告诉路由器设置预加载策略以预加载所有模块。
  句法：

  @NgModule({
  imports:[RouterModule.forRoot(appRoutes, { preloadingStrategy : PreloadAllModules})],
  exports:[RouterModule]

  })

• 现在，在Angular CLI中运行ngserve来重建您的应用程序。打开http：// localhost：4200 。右键单击以检查元素(或Ctrl + Shift + I)，然后转到“网络”选项卡以查看结果。
  句法：

  ng serve

示例：这是一个看起来像app-routing.module.ts的示例。

import { NgModule } from '@angular/core';
import { RouterModule, Routes, 
    PreloadAllModules } from '@angular/router';
  
import { ListComponent } from 
        './list/list.component';
import { DetailComponent } from 
        './detail/detail.component';
import { AppComponent } from './app.component';
import { PageComponent } from './page/page.component';
import { NewComponent } from './new/new.component';
  
const appRoutes: Routes = [
    { path: '', redirectTo: '/contact',
            pathMatch: 'full' },
              
    { path: 'contact', component: ListComponent },
    { path: 'details/:id', component: DetailComponent },
    { path: 'new', component: NewComponent },
    { path: 'not-found', component: PageComponent },
    { path: '**', redirectTo: '/not-found' }
]
  
@NgModule({
    imports: [RouterModule.forRoot(appRoutes,
        {
            preloadingStrategy: PreloadAllModules
        })],
    exports: [RouterModule]
  
})
export class AppRoutingModule {
  
}

输出：