ionic3 懒加载

时间:2021-05-28

ionic3 默认使用了懒加载技术,相较以前预加载的版本,ionic3构建的app在首页加载时间上有较大的优化,但是,ionic3默认每个页面都会对应一个模块,对于页面较多,但是每个模块都很小的应用可能并不怎么合理。于是,尝试将几个小模块合并为几个大的模块。

1. 一个模块对应一个页面:

默认状态下每个页面都会对应一个模块,如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js 。

原setting.module.ts

import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { SettingPage } from './setting'; @NgModule({ declarations: [ SettingPage, ], imports: [ IonicPageModule.forChild(SettingPage), ], entryComponents: [ SettingPage, ] }) export class SettingPageModule {}

2. 一个模块对应多个页面

修改后的setting.module.ts

import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { SettingPage } from './setting'; import {UserPasswordPageModule} from "./user-password/user-password.module"; import {UsernamePageModule} from "./username/username.module"; @NgModule({ declarations: [ SettingPage, ], imports: [ IonicPageModule.forChild(SettingPage), //将两个子页面模块引入 UserPasswordPageModule, UsernamePageModule, ], entryComponents: [ SettingPage, ] }) export class SettingPageModule {}

总结

以上所述是小编给大家介绍的ionic3 懒加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章