【angular-实践】angular懒加载(异步路由)

懒加载的场景

应用在启动时,有些模块可能根本就用不上,比如在一个商场系统中,用户打开首页时,只需要向用户展示商品,支付模块此时根本没用,因此对于支付模块就可以使用懒加载。

  • 优点:使用懒加载后,只加载必须的模块,因此首次加载的包体积大大减小,这样就可以加快应用的启动速度。
  • 缺点:或者说懒加载还是不能解决的是,如果某一个懒加载的模块体积过大,当加载时还是可能发生加载速度慢的情况,用户的页面被阻塞,体验下降。

可见,懒加载解决了请求额外资源导致的性能消耗,加载速度过慢的问题。

以登录模块为例

  • 创建带路由的模块及组件
ng g m pages/login --routing
ng g c pages/login

src\app\pages\login\login-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule { }

src\app\pages\login\login.module.ts

import { LoginRoutingModule } from './login-routing.module';

@NgModule({
  ...
  imports: [
    LoginRoutingModule,
  ],
  exports: [
    LoginComponent
  ]
})

到这login模块已经准备好了,
接下来修改根路由模块

src\app\router\app-routing.module.ts

export const mainRoutes: Routes = [
  {
    path: '',
    component: IndexComponent
  },
  {
    path: 'login',
    // 懒加载前
    // component: LoginComponent,	

	// 懒加载后
    loadChildren: () => import('../pages/login/login.module').then((x) => x.LoginModule)
  }
];

注意不要在src\app\app.module.ts里再引入Login组件和模块,
loadChildren就已经实现引入Login模块

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值