ionic3 懒加载配置 及 NgModule详解 (赞)

原文出处：https://www.jianshu.com/p/2c95e0fa4cc6
延伸阅读：Ionic3新特性--页面懒加载1  （实操例子）

一）懒加载

Ionic3默认采用懒加载机制，什么是懒加载呢？当我们第一次进入应用，会加载app.module,如果没有采用懒加载，那么app.module里的所有东西都会被加载，很显然这是不太合适的，因为里面的组件和服务我们在第一次进入应用时并没有全部使用，可能只使用了很少的一部分，那么对于比较大型的应用来说，由于页面和其他的服务，指令，管道比较多，就会造成比较用户体验不好的影响。
这个时候我们需要把应用分为一个个module，各自引入自己用到的东西，不要管别的模块。那么第一次进入应用，就只加载很少的app.module和root page对应的module，当我们进入其他页面的时候，才会去加载相应的module。这样的好处是项目代码结构清晰，易于维护，易于开发，而且第一次加载速度比较快。
当我们使用Ionic3的CLI来新建页面，默认的会是懒加载的结构，甚至不止页面，所有的component,service,directive都默认的是懒加载。

配置ionic3懒加载步骤：

1.给需要懒加载的页面配置module.ts；

例：配置about.module.ts：

import { NgModule } from '@angular/core';  
import { IonicPageModule } from 'ionic-angular';  
import { AboutPage } from './about';  

@NgModule({  
declarations: [  
    AboutPage,  
],  
imports: [  
    IonicPageModule.forChild(AboutPage),  
],  
})  
export class AboutPageModule { }  

2.在对应页面的.ts文件里增加@IonicPage()特性；

以about.ts为例，在@Component上方加上@IonicPage()特性(行号4，注意在上面引用IonicPage(见2行)),其他需要懒加载的页面同样操作配置。

import {Component} from '@angular/core';  
import {NavController, IonicPage} from 'ionic-angular';  

@IonicPage()  
@Component({  
    selector: 'page-about',  
    templateUrl: 'about.html'  
})  
export class AboutPage {  

    constructor(public navCtrl: NavController) {  
    }  
}

3.在app.module.ts移除页面引用；

将配置过懒加载的页面，在app.module.ts中进行移除引用，移除后的代码如下：

import {HttpModule} from "@angular/http";  
import {AppService} from "./app.service";  
import {NgModule, ErrorHandler} from '@angular/core';  
import {BrowserModule} from '@angular/platform-browser';  
import {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';  
import {MyApp} from './app.component';  
//import {AboutPage} from "../pages/about/about";  

import {StatusBar} from '@ionic-native/status-bar';  
import {SplashScreen} from '@ionic-native/splash-screen';  

@NgModule({  
    declarations: [  
        MyApp  
        //AboutPage  
    ],  
    imports: [  
        BrowserModule,  
        HttpModule,  
        IonicModule.forRoot(MyApp)  
    ],  
    bootstrap: [IonicApp],  
    entryComponents: [  
        MyApp  
        //AboutPage  
    ],  
    providers: [  
        StatusBar,  
        SplashScreen,  
        AppService,  
        {provide: ErrorHandler, useClass: IonicErrorHandler}  
    ]  
})  
export class AppModule {  
}  

4.使用懒加载；

使用懒加载，不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可：

例：app.component.ts代码段：

import { Component } from '@angular/core';  
import { Platform } from 'ionic-angular';  
import { StatusBar } from '@ionic-native/status-bar';  
import { SplashScreen } from '@ionic-native/splash-screen';  
//import {TabsPage} from "../pages/tabs/tabs";  

@Component({  
    templateUrl: 'app.html'  
})  
export class MyApp {  
    //不需要在顶部进行import导入，只需要将之前的页面名字用引号引起来即可  
    //rootPage:any = TabsPage;  
    rootPage:any = 'TabsPage';  

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {  
        platform.ready().then(() => {  
            statusBar.styleDefault();  
            splashScreen.hide();  
        });  
    }  
}  

配置完成。

补充：(参考：Ionic3新特性--页面懒加载1)
       如果调用页面时，也由页面的类名改为用字符串
       例如：
       this.navCtrl.push(AboutPage);        //之前写法
       改为：
       this.navCtrl.push('AboutPage');      //懒加载写法 
       

NgModule

 NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }

https://www.angular.cn/guide/ngmodule-faq

IonicPage

https://ionicframework.com/docs/api/navigation/IonicPage/

作者：ISD_H5开发团队
链接：https://www.jianshu.com/p/2c95e0fa4cc6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。