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

【问题标题】：angular lazy loading service worker prefetch角度延迟加载服务工作者预取
【发布时间】：2018-08-05 18:49:32
【问题描述】：

我意识到使用延迟加载失去了主要

用户不访问页面时 pwa 的功能

您没有离线浏览的可能性。

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

【问题讨论】：

标签： angular lazy-loading service-worker

【解决方案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 为真，您说的是在应用加载后立即预加载这个（即在第一个模块延迟加载后），否则按需预加载（即当用户单击链接时延迟加载它）

【讨论】：

感谢您的回复，但是使用 PreloadAllModules 您失去了延迟加载的好处还是我错了？
我从未尝试过，但我认为它在延迟加载初始模块后开始预加载，否则没有意义预加载 - 此外，您可以定义自定义预加载策略
对于这种情况，Angular 提供了一种方法来告诉路由器在应用程序加载后立即异步加载所有延迟加载模块，而不是等待用户点击时激活模块。跨度>
我知道你可以设置一个自定义加载器，但我从未见过，“Angular 提供了一种方法来告诉路由器加载所有延迟加载模块......”你能给我一个提示吗或者一些链接，好吗？
编辑了我的答案以涵盖自定义预加载...顺便说一句，“Angular 提供了一种方法来告诉路由器加载所有延迟加载模块”正在谈论 PreloadAllModules

【解决方案2】：

在 Angular 服务工作者文件 ngsw-config.json 中，将 installMode 设置为 prefetch 并在 resources.files 数组中指定 /*.js 将指示 Angular 服务工作者在如果您的用户在浏览器中在线导航，则安装 PWA 不会失去延迟加载的好处。

例子：

  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }
  ]
}

【讨论】：