Ionic3,懒加载

Ionic懒加载:

  普通的ionic项目中,创建好每一个Component页面后,都需要在app.module.ts中进行declaration(声明)后才能进行调用,而这样的声明方式,及在APP加载过程中,所有的component都将全部加载,因此,APP的启动时间会增加,影响用户体验。

  使用懒加载,可以减少APP的启动时间,减少打包的体积,同时也为路由提供了更加简便的操作。

实现效果

项目目录

  在ionic3中,对于每一个Component页面,都需要设置单独的module。

懒加载的实现步骤:

  ①在新创建好的项目中,找到app.module.ts,删除掉里面的已经写好的HomePage声明,如下图所示;

    

  ②修改home文件夹下面的相关文件,实现“懒加载”,相关步骤:

    一:修改 home.ts 文件,如图所示,添加 @IonicPage() 注解

      

    二:添加 home.module.ts 文件,对 home 组件进行相关声明,并且通过引入 IonicPageModule.forChild(),实现懒加载页面的注册:

      

    三:调用,因为是初始页面,所以调用的位置在 app.component.ts 中,直接用字符串的方式调用,HomePage:

      

  如果你要实现如效果图中的效果,则依次创建对应的页面,然后在 home.ts 文件下定义、引用就行。

    ①.home.html 页面中的定义方式:

      

    ② home.ts 中的定义:

      

项目创建过程中遇到的问题

  ① error.cannot find module “.”

  

  ②错误原因:关联依赖的引用文件错误导致。

  

  ③修改正确的相关引用文件:

  

The Ending ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

原文地址:https://www.cnblogs.com/mysouler/p/9383159.html

时间: 2024-10-10 09:45:54

Ionic3,懒加载的相关文章

ionic3 懒加载在微信上缓存的问题

1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.module.ts混乱,不美观,不易维护,不适用于结构繁多.业务复杂的项目. 懒加载的出现,使得在跳转到对应页面的时候加载对应页面的js.css.html,这样每个页面都是一个模块,只有在需要的时候才会加载,大大缓解了首屏的压力. 2.懒加载的使用: https://ionicframework.com/d

ionic 懒加载页面模块合并

ionic3 懒加载 ionic3 默认使用了懒加载技术,相较以前预加载的版本,ionic3构建的app在首页加载时间上有较大的优化,但是,ionic3默认每个页面都会对应一个模块,对于页面较多,但是每个模块都很小的应用可能并不怎么合理.于是,尝试将几个小模块合并为几个大的模块. 1. 一个模块对应一个页面: 默认状态下每个页面都会对应一个模块,如果项目之中的页面比较多那么最后构建的项目中的将会看到有很多的 js . 原setting.module.ts 1 import { NgModule

Ionic3 组件懒加载

使用懒加载能够减少程序启动时间,减少打包后的体积,而且可以很方便的使用路由的功能. 使用懒加载: 右侧红色区域可以省略掉(引用.声明也删掉) 若使用ionic命令新建page,则无需进行下面的操作,否则进行下面的操作: 新建文件:home.module.ts import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { LoginPage } from './lo

关于Hibernate中立即加载和懒加载的区别

当1表与2表之间有OneToMany(类似)关系时候, 对于1表的实体类,设置FetchType=EAGER时(也就是立即加载),取1表数据,对应2表的数据都会跟着一起加载,优点不用进行二次查询. 缺点是严重影响数据查询时间,查询速度慢. FetchType=LAZY(也就是懒加载),此时查询时间大大缩短,缺点是查询表1的数据时,查询不到2表的数据. 不会主动取查询2表的数据.

深入懒加载

[javascript] view plain copy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属

页面图片懒加载

一.页面滚动加载图片的理解 当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路 当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

懒加载 lazy loading

懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有资源加载完毕将极大的消耗内存,降低程序运行效率.所以就要将一些比较大的资源,如音频,数据,图片等大资源进行懒加载,就需要                                             先判断是否存在,如果不存在再创建实例化. 1 @property (nonatomic,

懒加载(延迟加载)之后,在使用数据过程中容易出现的bug

在UI中,使用懒加载,也就是延迟加载来加载数据的时候,总是会面临几个问题? 如:1. >为什么先创建NSArray属性? 2. >为什么重写NSArray的get方法? 3.>为什么要判断是否为空? 4.>为什么下方代码"//1"这里不用NSString stringWithFormat: 而"//2"这里要使用? 5.>同时"//2"这里为什么使用的是%ld 来作为占位符? 这些问题不搞懂,懒加载就很难通透,  代

懒加载的坑

先说如下东东: 比如我们申明这个鬼 @property (nonatomic, strong) NSArray *mineModelArray; 那么 _mineModelArray self.mineModelArray 这两个获取数组的原理是不一样的,(好多人都没注意这个) 第一个是就简单粗暴直接获取这个数组 第二个是调用@property的get方法获取到的,因为这个get方法返回的就是当前数组的的类型即一个数组.大多数情况下两者一样的的. 但是:如果在懒加载里面就不要再用self.min