失眠网 > angular 模块懒加载与预加载策略

angular 模块懒加载与预加载策略

时间：2019-08-27 06:03:27

相关推荐

angular 模块懒加载与预加载策略

一、模块懒加载

1、RouterModule.forRoot()和RouterModule.forChild()

RouterModule对象为提供了两个静态的方法:forRoot()和forChild()来配置路由信息。

RouterModule.forRoot()方法用于在主模块中定义主要的路由信息，RouterModule.forChild()与 Router.forRoot()方法类似，但它只能应用在特性模块中。

即根模块中使用forRoot()，子模块中使用forChild()。

2、懒加载：loadChildren

这里使用到了懒加载LoadChildren属性。这里没有将对应的模块导入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。

loadChildren的属性值由三部分组成：

需要导入模块的相对路径

#分隔符

导出模块类的名称

3、优化： main.bundle.js

之前main.bundle.js的大小为1447KB 减少为 358KB

之后：

4、实现

( 在项目目录下使用命令行工具)

1.ng g module login --routing

2.ng g component login

app-routing.module.ts

import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { CanDeactivateGuard } from './guard/can-deactivate-guard.service';import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; // 预加载import { PageNotFoundComponent } from './not-ponent';const appRoutes: Routes = [{ path: '', redirectTo: 'home', pathMatch: 'full'},{ path: 'login', loadChildren: './login/login.module#LoginModule' }, // 懒加载{ path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懒加载 + 预加载{ path: '**', component: PageNotFoundComponent } // 注意要放到最后];@NgModule({imports: [RouterModule.forRoot(appRoutes,{// enableTracing: true, // <-- debugging purposes onlypreloadingStrategy: SelectivePreloadingStrategy // 预加载})],exports: [RouterModule],providers: [CanDeactivateGuard,SelectivePreloadingStrategy]})export class AppRoutingModule { }/*Copyright(c): 深圳创新设计研究院Author: luo.shuqi@@file: app-routing.module.ts@time: / 7 / 2 17: 18*/

import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { AuthGuard } from '../guard/auth-guard.service';import { AuthService } from '../guard/auth.service';import { LoginComponent } from './ponent';const loginRoutes: Routes = [{ path: '', component: LoginComponent } // 注意path: ''];@NgModule({imports: [RouterModule.forChild(loginRoutes)],exports: [RouterModule],providers: [AuthGuard,AuthService]})export class LoginRoutingModule { }

home-routing.module.ts

import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './ponent';import { AuthGuard } from '../guard/auth-guard.service';const routes: Routes = [{path: '',component: HomeComponent,canActivate: [AuthGuard],children: [{ path: '', redirectTo: 'homepage', pathMatch: 'full' },{ path: 'homepage', loadChildren: './homepage/homepage.module#HomepageModule', data: { preload: true } },{ path: 'monitor', loadChildren: './monitor/monitor.module#MonitorModule' },{ path: 'device', loadChildren: './device/device.module#DeviceModule' },{ path: 'user', loadChildren: './user/user.module#UserModule' },{ path: 'application', loadChildren: './application/application.module#ApplicationModule' },{ path: 'airreport', loadChildren: './airreport/airreport.module#AirreportModule' },{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },{ path: 'led', loadChildren: './led-test/led.module#LedModule' },{ path: 'strategy', loadChildren: './strategy/strategy.module#StrategyModule' },{ path: 'issuedata', loadChildren: './issuedata/issuedata.module#IssuedataModule' },]},];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]})export class HomeRoutingModule { }/*Copyright(c): 深圳创新设计研究院Author: luo.shuqi@@file: home.routes.ts@time: / 7 / 2 17: 18*/

其他routing.module参考上面

二、预加载策略

1、问题描述

在没有使路由懒加载的时候，第一次使用的时候加载特别慢，影响用户体验，angular2可以使用loadChildren进行懒加载，第一次使用的时候只会加载需要的模块，其它模块在真正使用的时候才会去加载，这个时候打开浏览器控制台查看js加载的时候，会发现你在使用时候会去加载对应的js，导致第一次点击相应模块的功能时会卡顿一下，后面在使用就不会了，这样还是用户体验不好，接下来告诉你如果使用预加载策略解决这个问题。

2、预加载策略

RouterModule.forRoot的第二个添加了一个配置选项，这人配置选项中就有一个是preloadingStrategy配置，当然它还有其它配置，这里只讲preloadingStrategy，这个配置是一个预加载策略配置，我们需要实现一个自己的预加载策略，在一些不需要预加载的场景加我们可以不配置，首先新建一个selective-preloading-strategy.ts的文件，使用class实现PreloadingStrategy接口的preload方法，代码如下：

import { Injectable } from '@angular/core';import { PreloadingStrategy, Route } from '@angular/router';import { Observable } from 'rxjs';import { of } from 'rxjs';@Injectable()export class SelectivePreloadingStrategy implements PreloadingStrategy {preloadedModules: string[] = [];preload(route: Route, load: () => Observable<any>): Observable<any> {if (route.data && route.data['preload']) {// add the route path to the preloaded module arraythis.preloadedModules.push(route.path);// log the route path to the consoleconsole.log('Preloaded: ' + route.path);return load();} else {return of(null);}}}/*Copyright - Google Inc. All Rights Reserved.Use of this source code is governed by an MIT-style license thatcan be found in the LICENSE file at http://angular.io/license*/

导入

app-routing.module.ts

使用

app-routing.module.ts

const appRoutes: Routes = [{ path: '', redirectTo: 'home', pathMatch: 'full'},{ path: 'login', loadChildren: './login/login.module#LoginModule' }, // 懒加载{ path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懒加载 + 预加载];

如果觉得《angular 模块懒加载与预加载策略》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。