关于ionic的Lazy loading

应用场景

  • 当页面数量很多,应用比较复杂,并且首页加载在网速良好的情况下也很慢的时候,你可能需要Lazy loading

参考文章

  • https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/

实际效果
如果正确应用了懒加载的模式,那么打包后,会形成多个js文件 当第一个js文件加载完成后,就可以显示部分页面,并不需要将所有的js都加载完成,才可以看到页面。这样可以提高用户打开网页的速度。

如何使用

  • 假定有一个需要立刻加载的HomePage和一个不需要立刻加载出来的SettingPage。并且在homePage 点击按钮setting按钮后 才会跳转到SettingPage。
  • 将 HomePageModule(每一个page一般都会有一个 Module,当然也可以没有Module,没有Module的Page无法通过网址直接访问到) 添加到AppModule 的imports 中。
@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    TranslateProvider,
    AppConfig,
    HttpConfig,
    StatusBar,
    SplashScreen,
    HTTP,
  ]
})
export class AppModule {
}
  • 将 SettingPageModule 添加到 HomePageModule的 imports

@NgModule({
  declarations: [HomePage],
  imports: [
    IonicPageModule.forChild(HomePage),
    SettingPageModule
  ],
  exports: [
    HomePage
  ]

})
export class HomePageModule {
}
  • 完成上述操作,浏览器就会先加载 AppModule,然后再加载HomePageModule,最后加载SettingPageModule。

你可能感兴趣的:(关于ionic的Lazy loading)