Angular 预加载的实现

旧城等待， 2021-09-17 09:12 555阅读 0赞

### 预加载 ###

我们在使用懒加载的情况下，在系统开始加载的时候，只加载首页，剩余的模块在使用时才进行加载，如果新加载模块非常庞大，那么经常会出现这种情况：在第一次点击新添加的模块的时候，相应的模块会出现卡顿的情况。再次点击此模块的时候，不会出现这种情况。为了解决模块首次加载会出现卡顿的情况，Angular提供了`预加载策略`来解决这个问题。`预加载`是在`懒加载`的基础上进行的。

`RouterModule.forRoo()`的`第二个参数`可以添加配置选项，配置选项中就有一个是`preloadingStrategy`配置，这个配置是一个预加载策略配置。

Angular中提供了两种加载策略，一种是上面用到`PreloadAllModules`，还有一种是`NoPreloading`，也就是没有预加载，源码注释说明了默认的模式是NoPreloading

### Angular默认预加载配置 ###

这个`PreloadAllModules` 策略来自`@angular/router`

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { HomeComponent } from './home/home.component';
    import { routes } from './main.routing';
    import { RouterModule } from '@angular/router';
    import { PreloadAllModules } from '@angular/router';
    
    @NgModule({
      declarations: [
        AppComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes, { preloadingStrategy:  PreloadAllModules })
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

### 自定义预加载策略 — 指定预加载的模块 ###

使用PreloadAllModules的缺点是不能控制那些模块加载那些模块不加载，我们可以定义自己的预加载策略，并在模块中使用

新建一个selective-preloading-strategy.ts的文件，使用class实现PreloadingStrategy接口的preload方法，代码如下：

import { PreloadingStrategy, Route } from "@angular/router";
    import { Observable } from "rxjs";
    /**
     * 预加载策略
     */
    export class SelectivePreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
         //当路由中配置data: {preload: true}时预加载
         return route.data && route.data && route.data['preload'] ? load() : Observable.of(null);
     }

在routing-module.ts 使用 data: \{preload: true\}

import { Routes } from '@angular/router';
    // HomeComponent this components will be eager loaded
    import { HomeComponent } from './home/home.component';
    
    export const routes: Routes = [
        { path: '', component: HomeComponent, pathMatch: 'full' },
        { path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
        { path: '**', component: HomeComponent }
    ];

在 app.module.ts 中使用这个策略，需要注意的是，您还需要在`prodivers`中添加这个类。以实现依赖注入。

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { HomeComponent } from './home/home.component';
    import { routes } from './main.routing';
    import { RouterModule } from '@angular/router';
    import { PreloadSelectedModules } from './preload.module';
    
    @NgModule({
      declarations: [
        AppComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes, { preloadingStrategy:  PreloadSelectedModules })
      ],
      providers: [PreloadSelectedModules ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

### 自定义预加载策略 — 5秒之后加载所有模块 ###

实现接口 `PreloadingStrategy`，我们定义一个 CustomPreloadingStrategy 的自定义策略类。

import { Route } from '@angular/router';
    import { PreloadingStrategy } from '@angular/router';
    import { Observable } from 'rxjs/Rx';
    
    export class CustomPreloadingStrategy implements PreloadingStrategy {
        preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
            return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
        }
    }

修改 app.module.ts 使用这个自定义策略。需要注意的是，您还需要在`prodivers`中添加这个类。以实现依赖注入。

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import { HomeComponent } from './home/home.component';
    import { routes } from './main.routing';
    import { RouterModule } from '@angular/router';
    import { CustomPreloadingStrategy } from './preload';
    
    @NgModule({
      declarations: [
        AppComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes, { preloadingStrategy:  CustomPreloadingStrategy })
      ],
      providers: [CustomPreloadingStrategy ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

参考：  
[https://blog.csdn.net/happykala/article/details/77945000][https_blog.csdn.net_happykala_article_details_77945000]  
[https://blog.csdn.net/rotating\_windmill/article/details/75142648][https_blog.csdn.net_rotating_windmill_article_details_75142648]  
[https://www.cnblogs.com/haogj/p/7649707.html][https_www.cnblogs.com_haogj_p_7649707.html]

[https_blog.csdn.net_happykala_article_details_77945000]: https://blog.csdn.net/happykala/article/details/77945000
[https_blog.csdn.net_rotating_windmill_article_details_75142648]: https://blog.csdn.net/rotating_windmill/article/details/75142648
[https_www.cnblogs.com_haogj_p_7649707.html]: https://www.cnblogs.com/haogj/p/7649707.html