Ionic3中懒加载的注意事项

在ionic3中,官方给出了使用懒加载来提升性能的解决方案,如果你的项目过于庞大,官方也给出了脚本用于你的懒加载.

1.为页面创建模块并使用IonicPage
使用Ionic 2，我们为每个页面提供了一个文件夹，其中包含3个文件，如下图所示。

upload successful

在每个文件夹中，我们需要创建一个NAME.module.ts类型的新文件,这个新模块文件应如下所示（如果我们按照图像中的命名）：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomeTabsPage } from './home-tabs';
 
@NgModule({
  declarations: [
    HomeTabsPage,
  ],
  imports: [
    IonicPageModule.forChild(HomeTabsPage),
  ],
  exports: [
    HomeTabsPage
  ]
})
export class HomeTabsPageModule {}

在为每个页面创建这个新模块之后，我们还必须为每个页面文件添加一个装饰器。确保导入并将其添加到您的所有页面：

import { IonicPage } from 'ionic-angular';
...
...
@IonicPage()
@Component({

这里需要注意的是,IonicPage这个装饰器,IonicPage接受一个元数据作为参数使用,默认情况下为空,元数据共有4个可配参数,分别是name,segment,defaultHistory,priority这里面和懒加载有关的为priority;该priority属性仅在预加载期间使用。默认情况下，预加载已关闭，因此设置此属性将不执行任何操作,要启用预加载，请preloadModules在主应用程序模块config中设置true：

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule { }

如果打开预加载，它将根据值加载模块priority。下面的值是可能的priority：”high”，”low”，和”off”。如果没有priority，它将被设置为”low”。
所以这里,请根据自己项目的实际需求选择是否使用预加载

@IonicPage({
  priority: 'high'
})

2.删除页面导入和更改用法
在所有页面中，您现在可以继续删除其他页面的import语句。

Especiall浏览app.module.ts并删除导入，从声明和entryComponents中删除页面。

例如之前:

this.navCtrl.push(HomePage);

现在

this.navCtrl.push('HomePage');

3.添加新模块
我们还需要将BrowserModule导入app.module.ts。如果你的应用程序正在使用HTTP调用，您还需要导入HttpModule，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
...
...
imports: [
  BrowserModule,
  HttpModule,
  IonicModule.forRoot(MyApp)
],

4.Pipes(管道)的懒加载
与angular的共享模块类似的方法一样,我们可以新建一个pipes.module.ts文件内将导入所有你的pipe管道,例如

import { SortScheduleTime } from './sort-schedule-time';
import { SortEventTime } from './sort-event-time';
import { EventFilter } from './event-filter';
import { CustomDate } from './custom-date';
import { NgModule } from '@angular/core';
 
@NgModule({
    declarations: [
        CustomDate,
        EventFilter,
        SortEventTime,
        SortScheduleTime
    ],
    imports: [
 
    ],
    exports: [
        CustomDate,
        EventFilter,
        SortEventTime,
        SortScheduleTime
    ]
})
export class PipesModule {}

如果现在想要在其中一个页面中使用管道，只需将新管道模块添加到该页面的导入中，如下所示

import { PipesModule } from './../../pipes/pipes.module';
..
..
imports: [
    IonicPageModule.forChild(EventDetailsPage),
    PipesModule
  ],

5.components(组件)的懒加载
与自定义管道类似的方法,新建一个components.modules.ts即可

Mccc

Ionic3中懒加载的注意事项