1.1 angular——懒加载

将angular项目打包上架后发现,启动速度是在太慢了,花了十几秒,没人性~~~~找到原因,原来默认情况下,在初始化的时候就把所有路由给加载完了,那么多页面,就这样一次性加载完,不慢就见鬼了~
用什么来解决这个问题呢,用懒加载。
比如你有一个about组件,默认情况下about文件夹中有四个文件,如下:


image.png

现在新增两个文件:about.module.ts和about-routing.module.ts
文件内容为
about.module.ts

import { NgModule } from '@angular/core';
import {AboutRoutingModule} from './about-routing.module';
import {AboutComponent} from './about.component';
import { CommonModule } from '@angular/common';

@NgModule({
    // imports:[
    //    ShareModule,
    //    AboutRoutingModule
    // ],
    imports:[
        CommonModule,
        AboutRoutingModule
     ],
    declarations:[
        AboutComponent
    ],
    exports:[
        AboutComponent
    ]
})
export class AboutModule{}

about-routing.module.ts内容如下:

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



//配置路由
const about_routes:Routes=[
    {
        path:'about',
        component:AboutComponent
    }
]
@NgModule({
    imports:[
        RouterModule.forChild(about_routes),
    ],
    exports:[
        RouterModule
    ],
    declarations:[]
})
export class AboutRoutingModule{}

在app.module.ts 和app-routing.module.ts删除原来的

import { AboutComponent } from './components/about/about.component';

将路由配置改为

{path:'',loadChildren:'./components/about/about.module#AboutModule'},

记得,这里path要为空才行

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容