angular - 角度延迟加载服务工作者预取
问题描述
我意识到使用延迟加载会失去主要
如果用户不访问页面,pwa 的功能
您没有离线浏览的可能性。
那么有没有办法预取延迟加载文件?
解决方案
是的,您需要定义预加载策略:
imports: [RouterModule.forRoot(ROUTES, {preloadingStrategy: PreloadAllModules})]
有关详细信息,请参阅http://recurship.com/blog/2017/9/30/introduction-to-angular-router-lazy-loading-and-prefetchin
自定义预加载策略:
您还可以使用自定义预加载策略预加载一些而不是其他一些。
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 为真,您说的是在应用程序加载后立即预加载(即在第一个模块延迟加载之后),否则按需预加载(即当用户单击链接时延迟加载它)
推荐阅读
- python - Python 中的多变量 Kruskall Wallis 包
- python - Visual Studio Code , PS(需要解释以及如何删除它)
- c++ - 使用 gstreamer 管道剪切部分视频
- python - 我错过了什么?Python 套接字问题
- rust - 是否可以将某些结构保存为字节序列?
- sql - 如何替换此查询中的 WM_CONCAT 函数?[ORA-00904:“WM_CONCAT”:无效标识符]
- javascript - 是为每篇文章创建一个文件还是为每篇文章重复使用一个文件更好?
- apache-kafka - 孤立的 Kafka 连接任务
- html - 字幕项目重叠
- programming-languages - 线程安全和原子之间的真正区别是什么?