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要为空才行