在项目中划分模块,使用懒加载的模式,可以使我们的页面加载变快。是因为默认情况下,初始化的时候就会加载完所有的页面,如果页面多,应用大,就会出现页面加载慢的问题。
知识点
RouterModule.forRoot()和RouterModule.forChild();
RouterModule提供了两个静态方法:forRoot()和forChild()来配置路由信息。
在我们项目初始化的时候,会有一个app-routing.module.ts文件。此文件中使用的就是forRoot()方法。forRoot()在主模块中定义主要的路由信息。而forChild()则是用在子模块中,用于配置路由信息的。
懒加载
默认情况下,我们定义的组件和相关内容,都需要注册到根模块app.module.ts中去,如果组件多时,体积会相当的庞大。但是,如果使用了懒加载的模式,我们只需要把子模块的module注入根模块即可。其余的相关依赖引入子模块的module中。
在app-routing.module.ts中,如果默认模式,路由的定义
let routes:Routes = [{
path:'xxx/:params',component:'xxxx'}];
懒加载模式:
let routes:Routes = [{
path:'xxx',
loadChildren:() =>import ('引入对应的子模块的module路径').then(m => m.子模块名字)
}]
这样就可以减少应用启动时加载资源的大小。