Question

我意识到使用延迟加载会失去主要功能

pwa的功能（如果用户不访问该页面）

您无法进行离线浏览。

有没有办法预取延迟加载的文件？

Answer 1

是的，您需要定义预加载策略：

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

有关更多详细信息，请参见http://recurship.com/blog/2017/9/30/introduction-to-angular-router-lazy-loading-and-prefetchin

另请参见https://blog.cloudboost.io/angular-faster-performance-and-better-user-experience-with-lazy-loading-a4f323b2cf4a

自定义预加载策略：

您还可以使用自定义预加载策略来预加载某些而不是其他。

请参见https://blog.cloudboost.io/angular-faster-performance-and-better-user-experience-with-lazy-loading-a4f323b2cf4a#e836

import 'rxjs/add/observable/of';
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) { // see app.routing.ts
      this.preloadedModules.push(route.path);
      return load();
    } else {
      return Observable.of(null);
    }
  }
}

然后进入app.module.ts：

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: 
CustomPreloadingStrategy })],
  exports: [RouterModule],
  providers: [CustomPreloadingStrategy]
})

app.routing.ts：

{
    path: ':section',
    loadChildren: './gm-email/gm-email.module#GmEmailModule',
    data: { preload: true }
}

基本上，如果data.preload为true，则是说在应用程序加载后立即将其预加载（即在第一个模块延迟加载之后）ELSE按需预加载（即当用户单击链接延迟加载时）

角延迟加载服务工作者预取

1 个答案: