DDR爱好者之家 Design By 杰米
1.问题描述
在没有使路由懒加载的时候,第一次使用的时候加载特别慢,影响用户体验,angular2可以使用loadChildren进行懒加载,第一次使用的时候只会加载需要的模块,其它模块在真正使用的时候才会去加载,这个时候打开浏览器控制台查看js加载的时候,会发现你在使用时候会去加载对应的js,导致第一次点击相应模块的功能时会卡顿一下,后面在使用就不会了,这样还是用户体验不好,接下来告诉你如果使用预加载策略解决这个问题。
2.预加载策略
RouterModule.forRoot的第二个添加了一个配置选项,这人配置选项中就有一个是preloadingStrategy配置,当然它还有其它配置,这里只讲preloadingStrategy,这个配置是一个预加载策略配置,我们需要实现一个自己的预加载策略,在一些不需要预加载的场景加我们可以不配置,首先我们新建一个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'] "htmlcode">import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {SelectivePreloadingStrategy} from "./selective-preloading-strategy"; import { LoginComponent } from './login/login.component'; import { MainComponent } from './main/main.component'; /** * app路由 */ const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'app', component: MainComponent, loadChildren: 'app/main/main.module#MainModule', data: {preload: true} } ]; export const appRoutes=RouterModule.forRoot(routes,{preloadingStrategy: SelectivePreloadingStrategy});还需要在AppModule的providers添加,代码如下:
/** * app模块 */ @NgModule({ imports: [ appRoutes, BrowserModule, BrowserAnimationsModule, NgbModule.forRoot(), MainModule, LoginModule ], declarations: [ AppComponent, ToastBoxComponent, ToastComponent, SpinComponent ], providers: [AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy], exports:[ToastBoxComponent,SpinComponent], bootstrap: [ AppComponent ] }) export class AppModule {}接下来在路由中使用,代码如下:
import { NgModule, OnInit } from '@angular/core'; import { RouterModule, Routes, Router } from '@angular/router'; /** * 主体路由 */ const routes: Routes = [ { path: 'home', loadChildren: 'app/home/home.module#HomeModule', data: {preload: true} }, { path: 'demo', loadChildren: 'app/demo/demo.module#DemoModule', data: {preload: true} }, ]; export const mainRoutes = RouterModule.forChild(routes);打开浏览器F12,查看js的加载,你会发现,当页面加载完后,会预加载其它模块的js
官网上有一个默认实现PreloadAllModules ,自行参考官网说明。
具体代码到我的github上找,https://github.com/332557712/cc 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]