ionic 懒加载

与angular4的路由懒加载对比

1. ionic只能对每个页面进行单独配置，不能一次性在功能模块中配置
2. 页面与组件的配置方法不一样,与管道及指令也不一样

配置步骤

1. 功能模块module的文件：清空所有组件与管道，只留下服务

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { IonicModule } from 'ionic-angular';

import { AttendanceService } from './shared/service/attendance.service';

@NgModule({
  imports:      [ CommonModule, IonicModule ],
  providers:    [ AttendanceService ]
})
export class AttendanceModule {}

2. 把所有管道（指令）放到一个module里

可以单独为每一个管道（指令）建立一个module,然后按需导入到对应的懒加载页面的module里

pipes.module.ts

import { NgModule } from '@angular/core';
import { ReasonTypePipe } from './reason-type.pipe';
import { OtherTypePipe } from './other-type.pipe';
import { FormTypePipe } from './form-type.pipe';
import { WeekNamePipe } from './week-name.pipe';
import { DuringPipe } from './during.pipe';
import { LengthPipe } from './length.pipe';
import { ChineseConv } from './chinese-conv.pipe';
import { MydatePipe } from './mydate.pipe';

@NgModule({
  declarations: [ReasonTypePipe, OtherTypePipe, FormTypePipe, WeekNamePipe, DuringPipe, LengthPipe, ChineseConv, MydatePipe],
  exports: [ReasonTypePipe, OtherTypePipe, FormTypePipe, WeekNamePipe, DuringPipe, LengthPipe, ChineseConv, MydatePipe]
})
export class PipesModule { }

3. 非页面组件，新增module文件,并把需要的指令及管道导入

import { NgModule }      from '@angular/core';
import { IonicModule } from 'ionic-angular';

import { ListFilterComponent } from './list-filter.component';

import { PipesModule } from '../shared/pipe/pipes.module';

@NgModule({
  imports: [IonicModule, PipesModule],
  declarations: [ListFilterComponent],
  exports: [ListFilterComponent]
})
export class ListFilterComponentModule { }

4. 页面：新增module文件,导入需要的组件和管道

注意命名格式（在ts文件名后加module,如要懒加载的页面为hello.component.ts,则此module文件名字为:hello.component.module.ts）！！！

import { NgModule } from '@angular/core';
import { FormListComponent } from './form-list.component';
import { IonicPageModule } from 'ionic-angular';
import { PipesModule } from '../shared/pipe/pipes.module';//此页面需要的管道
import { ListFilterComponentModule } from '../list-filter/list-filter.component.module';//此页面需要的组件

@NgModule({
  declarations: [FormListComponent],
  imports: [ListFilterComponentModule, PipesModule,IonicPageModule.forChild(FormListComponent)],
  entryComponents: [
    FormListComponent
  ]
})
export class FormListComponentModule { }

组件内引入IonicPage

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

@IonicPage()
@Component({
  selector: 'sg-form-list',
  templateUrl: 'form-list.component.html',
})
export class FormListComponent {

懒加载页面的使用

不需要import页面, 使用时组件名字加引号就可以，如进入下一页:

this.navCtrl.push('BusinessFormComponent');

懒加载后的改变

1. 进入懒加载页面url改变

http://localhost:8100/#/%E5%BA%94%E7%94%A8/chart.component/e-r-p-%E5%BA%AB%E5%AD%98%E7%AE%A1%E7%90%86/storage.component

2. 每个懒加载页面第一次进入时在network中能看到xx.main.js加载进来

Name| Status| type
---|---
29.main.js|304|script

3. 生成的app大小增大了一点

相关

ionic官网懒加载说明

如果觉得文章对你有点用的话，麻烦拿出手机，这里有一个你我都有的小福利（每天一次）： 打开支付宝首页搜索“8601304”，即可领红包。谢谢支持