Ionic--lazyload懒加载知识总结

水深无声 2022-05-11 04:36 244阅读 0赞

原文出处：[https://blog.csdn.net/CODING\_1/article/details/77264541][https_blog.csdn.net_CODING_1_article_details_77264541]

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

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

![Center][]

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

![Center 1][]

**第一步:删除**

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

**第二步:添加module文件**

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

![Center 2][]

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

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

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

![Center 3][]

**第四步:最后的整理**

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

![Center 4][]

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

[https_blog.csdn.net_CODING_1_article_details_77264541]: https://blog.csdn.net/CODING_1/article/details/77264541
[http_blog.ionic.io_ionic-and-lazy-loading-pt-1]: http://blog.ionic.io/ionic-and-lazy-loading-pt-1/
[Center]: /images/20220511/8b90a3b6e6d74d76a65eaadddbd89c5d.png
[Center 1]: /images/20220511/1464a1b7bc204d88a55ba9aea0884c55.png
[Center 2]: /images/20220511/d4bc7c0076b84799ab41c1174d4e0fc7.png
[Center 3]: /images/20220511/b2120aa41419473299783edc5bc7484b.png
[Center 4]: /images/20220511/b86483a027564b2c8874ade069c3bc73.png