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

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 为真，您是说在应用程序加载后立即预加载（即在第一个模块延迟加载后） ELSE 按需预加载（即当用户单击链接时延迟加载它）