Ionic--lazyload懒加载知识总结

前两天到一个ionic项目,让人很纳闷的一件事是在pages文件夹重定义了很多页面,正常我们想引用这也页面都需要将页面导入到app.module.ts和app.component.ts文件中,结果在那两个文件中竟然没有找到导入的文件,于是找了一下资料原来利用的是懒加载http://blog.ionic.io/ionic-and-lazy-loading-pt-1/里面介绍的还是比较简洁的.现在写这篇文章是因为之前看过现在忘了,借此来回顾一下吧(延迟加载是3.0.0及以上bate版本,未来细节可能会修改)

当我们创建ionic项目时会得到一些文件

在src/app/app.module.ts中会发现有这样的一段代码

第一步:删除

这里HomePage组件被导入,当我们实际开发项目时将会有大量的页面被创建,从便捷和性能方面考虑,我们想把HomePage组件从app.module.ts中移除,只在需要的时候加载它,于是我们将declarations和entryComponents以及import声明的HomePage删除

第二步:添加module文件

此时我们在home文件夹中创建home.module.ts得到文件src/pages/home/home.module.ts

这里我们使用到了IonicPageModule它告诉ionic应该为这个模块加载或提供什么组件

第三步:HomePage组件的@IonicPage装饰器

在src/pages/home/home.ts文件中添加@IonicPage装饰器

第四步:最后的整理

在src/app/app.component.ts文件中删除了import的HomePage,此时我们需要将rootPage的值设置为'HomePage'

在只有几个组件的页面使用懒加载可能感觉不到性能有多大提升,但是随着项目的越来越大,懒加载的优势就会越来越明显,如果想了解更多关于懒加载请移步,如有不正确欢迎指正