ionic3 使用懒加载（译）-原创手记-慕课网

1. 更新到ionic3

.1 把node_modules/文件夹中的所有依赖删掉
.2 修改package.json,如下：

"dependencies": {    "@angular/common": "4.0.0",    "@angular/compiler": "4.0.0",    "@angular/compiler-cli": "4.0.0",    "@angular/core": "4.0.0",    "@angular/forms": "4.0.0",    "@angular/http": "4.0.0",    "@angular/platform-browser": "4.0.0",    "@angular/platform-browser-dynamic": "4.0.0",    "@ionic-native/core": "3.4.2",    "@ionic-native/splash-screen": "3.4.2",    "@ionic-native/status-bar": "3.4.2",    "@ionic/storage": "2.0.1",    "ionic-angular": "3.0.1",    "ionicons": "3.0.0",    "rxjs": "5.1.1",    "sw-toolbox": "3.4.0",    "zone.js": "^0.8.4"},"devDependencies": {  "@ionic/app-scripts": "1.3.0",  "typescript": "~2.2.1"}

.3 重新npm install，如果在国内的话，请在后面添加参数以加快速度<code>--registry=https://registry.npm.taobao.org</code>。

2.使用lazy loading

使用懒加载能够减少程序启动时间，减少打包后的体积，而且可以很方便的使用路由的功能。

注意：如果之前使用了<code>DeepLinkConfig</code>请先删除，因为要在每个页面添加<code>IonicPage</code>修饰符

接下来为了展示lazy loading 的使用，我们将新建一个空的 ionic 项目。在app.module.ts中，我们可以看到：

import { HomePage } from '../pages/home/home';
....@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],

  entryComponents: [
    MyApp,
    HomePage
  ],
 
})

现在我们想让程序只加载app.component.ts,而让 <code>HomePage</code>被懒加载。
因此我们把app.module.ts中有关HomePage的引用和声明删掉，变成:

....@NgModule({
  declarations: [
    MyApp
  ],

  entryComponents: [
    MyApp
  ],
})

接下来需要在

└home
 ├─ home.html
 ├─ home.scss
 └─ home.ts

中增加一个home.module.ts文件，如下：

import { NgModule } from '@angular/core';
import { HomePage} from './home’;
import { IonicPageModule } from 'ionic-angular';

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

接下来，修改home.ts的文件，增加@IonicPage修饰。如下：

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

@IonicPage()
@Component({
    ---
})export class HomePage {

现在我们的HomePage已经可以懒加载了，我们不必再直接在app.component.ts使用
import { TabsPage } from '../pages/tabs/tabs';这样的方式引用，现在需要改成：

//原先是这样的，/*
import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

*///现在是这样的。@Component({
  templateUrl: 'app.html'})
export class MyApp {
  rootPage:any = 'HomePage'; //此处改成了字符串

我们可以看到现在改成了字符串HomePage（注意这个值要跟组件中声明的值一致）。这个字符串其实是跟@IonicPage()声明的name是一致的，默认与组件名一致。
上面便可以把组件的懒加载实现了。

3. 重新组织 Components/Providers/Pipes文件，

对于Component官方给的建议是：
One module that imports all component classes, no individual modules for each component。（官方也是无奈啊，目前只有简单的实现）

components/
   components.module.ts (ComponentsModule)
       imports and exports all components the user creates
   component1/
       component1.ts
       component1.html
   component2/
       component2.ts
       component2.html

按照这样的方式使用ionic 生成页面的工具，将自动在ComponentsModule引入。
对于 Pipes
同样的，适时添加module

pipes/
   pipes.module.ts (PipesModule)
       imports and exports all pipes the user creates
   pipe1.ts
   pipe2.ts

对Providers来说，没有相对应的module，可以使用主的ngmodule进行配置（这个可以在每个component中进行声明）

作者：cpu_driver
链接：https://www.jianshu.com/p/a445b497cb60