Ionic3新的懒加载机制给我带来了如下新特性:

  1. 避免在每一个使用到某PageModule或其他Page中重复的import这个类(需要写一堆路径)
  2. 允许我们通过字符串key在任何想使用的地方获取某一Page;
  3. 通过以上两点让我们的代码更简洁;
  4. 懒加载,客户响应度更好,体验更友好的加载,更快的响应。这个是我认为的带来的最好的特性;
  5. 让开发过程实时编译更快。

下面我们对比的看看老的方式和新的懒加载方式的实现。

环境描述:

Ionic CLI: 3.1.2

1. 老的加载方式实现

首先我们在terminal中通过如下命令创建一个新的Ionic3的应用:

ionic start routy tabs --v2

这里创建了一个Ionic3的app,来看一下app.module.ts的定义:

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs'; @NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
...
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
]
})

每次我们创建一个新的Page,我们需要在app.moudle.ts中添加对应的import和声明。


同样,在Main Component中,也需要同样的引入:

import { TabsPage } from '../pages/tabs/tabs';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
...
}

这里当需要设置rootPage时,也需要通过import来引入对应Page


同样的对于navigation也需要进行导航Pageimport

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about'; @Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage { constructor(public navCtrl: NavController) { } ngOnInit() {
this.navCtrl.push(AboutPage);
}
}

这里我们需要在通过NavController导航前,import AboutPage

2. 新的懒加载的方式实现

我们可以看到,基于我当前的最新的Ionic CLI的版本(3.1.2),创建的新工程里面的默认页面不是基于Lazy Load的。

然后我们通过命令新创建一个page试试:

ionic g page options

注意,这个命令要在当前工程根目录下执行。

创建完成后,我们就在pages文件夹下拥有了一个新的OptionsPage:

pages/options/options.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular'; /**
* Generated class for the OptionsPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-options',
templateUrl: 'options.html',
})
export class OptionsPage {
...
}

可以看到与以前创建的Page不同的是,增加了一个@IonicPage装饰器。

并且在同一个文件夹内,我们可以看到还自动生成了一个新的名为OptionsPageModuleModule

pages/options/options.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OptionsPage } from './options'; @NgModule({
declarations: [
OptionsPage,
],
imports: [
IonicPageModule.forChild(OptionsPage),
],
exports: [
OptionsPage
]
})
export class OptionsPageModule {}

好了,到此为止,就是我们引入一个新的Page所需要做的所有事情,剩下的就是直接使用了,我们简单总结一下:

  1. 创建一个Component,并且通过@IonicPage()装饰器进行装饰;
  2. 创建一个Module,在其中引入创建的Page,并且通过IonicPageModule.forChild(OptionsPage)在全局中声明这个Page。

    好了,我们可以在其他页面中使用了。

我们在pages/home/home.ts中增加如下代码:

goToOption():void{
this.navCtrl.push('OptionsPage');
}

注意这里,调用的时候也有改变,我们只需要传递一个字符串,这个字符串默认就是Page对应的类名。

然后在pages/home/home.html中增加按钮,通过点击来触发上面的方法:

<button ion-button secondary (click)="goToOption()">懒加载</button>

然后我们就可以通过Chrome跟踪一下是否真正实现了懒加载,在www目录下可以看到下图:

增加了一个0.main.js文件,这里面就是我们的OptionsPage声明。


好了,让我们可以通过将默认的页面也都改成这种模式,修改后app.module.ts变得非常简洁:

@NgModule({
declarations: [
MyApp
]
...
entryComponents: [
MyApp
]
...
})

当然别忘了,将相应的路由的位置的类名,修改为对应的字符串名:

app.component.ts:

export class MyApp {
rootPage:any = "Tabs";
...
}

tabs.ts:

export class Tabs {
tab1Root = "Home";
tab2Root = "About";
tab3Root = "Contact";
...
}

总结一下

作为Ionic3推出的最重要的特性,经测试,当前基于3.1.2的最新Ionic CLI已经完全稳定的支持Lazy Loaded Pages,其在解决项目加载慢的同时,也大大的简化了我们代码量。但是还是有一些设计上的问题需要解决,当然设计上的事情,没有银弹,我们还是可以根据具体情况具体的处理。

less code, less imports, less paths to remember: The less, the better!

注意:只能是在基于NavController导航的Page可以实现懒加载,如果作为Component使用(直接在html中使用selector作为标签使用),还是要采用老的加载机制。但是官方依然推荐我们对ComponentPipe等进行模块化处理,后续会继续说明这一点。

本文翻译自Ionic 3 New Pages Lazy Loading并根据个人理解完善,并根据最新的情况对一些内容进行了修改。

Ionic3新特性--页面懒加载1的更多相关文章

  1. Ionic3新特性--页面懒加载2加载其他组件

    在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component.Pipe.Directive等的模块化,和加载使用. 首先说明一点, ...

  2. Java Web SpringMVC AJAX,实现页面懒加载数据

    因为做的微信端的网页,所以在显示后台数据的时候,要么分页,要么全部加载数据,开始分页对于用户来说,其实体验不是很好,毕竟要去不断的点击下一页,但是如果我把全部数据读取出来的话,但用户可能也就看前面几条 ...

  3. Selenium处理页面懒加载方法

    在做selenium webdriver  在做UI自动化时,有些页面时使用懒加载的形式显示页面图片,如果在不向下移动滚动条时,获取到的图片会是网站的默认图片和真实的图片不相符. 1.滑动滚动条 1. ...

  4. JS简单实现滚动自动加载新内容(懒加载)

    加载源 // 这里存后台发来的数据 var galleryList = [ { src: "./images/1.jpeg", desc: "11111" }, ...

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

    1.懒加载是什么? 在ionic2中所有的组件.模块.服务.管道等都堆积在app.module.ts模块中,在页面初始化的时候会一次性加载所有的资源,导致资源过大,页面渲染缓慢,也导致app.modu ...

  6. ionic3懒加载IonicPage使用报错

    ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...

  7. 「新特性」Spring Boot 全局懒加载机制了解一下

    关于延迟加载 在 Spring 中,默认情况下所有定的 bean 及其依赖项目都是在应用启动时创建容器上下文是被初始化的.测试代码如下: @Slf4j @Configuration public cl ...

  8. Ionic3,懒加载(二)

    Ionic懒加载: 普通的ionic项目中,创建好每一个Component页面后,都需要在app.module.ts中进行declaration(声明)后才能进行调用,而这样的声明方式,及在APP加载 ...

  9. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

随机推荐

  1. 海康/大华 IpCamera RTSP地址和格式

    海康:rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream说明:username: 用户名.例如 ...

  2. 前端魔法堂:解秘FOUC

    前言  对于问题多多的IE678,FOUC(flash of unstyled content)--浏览器样式闪烁是一个不可忽视的话题,但对于ever green的浏览器就不用理会了吗?下面尝试较全面 ...

  3. 学习MVC之租房网站(六)-用户登录和权限控制

    在上一篇<学习MVC之租房网站(五)-权限.角色.用户管理>完成了权限.角色.用户的增删改查,现在将基于前面完成的内容,进行后台用户登录和权限控制功能的开发. 一.用户登录 用户登录涉及到 ...

  4. vscode同步设置&扩展插件

    首先安装同步插件: Settings Sync 第二部进入你的github如图:  打开设置选项: 新建一个token: 如图:  记住这个token值 转到vscode 按shift+alt +u ...

  5. 03(1) Gaussians,GMMs基础

    1.单成分单变量高斯模型 2.单成分多变量高斯模型 若协方差矩阵为对角矩阵且对角线上值相等,两变量高斯分布的等值线为圆形 若协方差矩阵为对角矩阵且对角线上值不等,两变量高斯分布的等值线为椭圆形, 长轴 ...

  6. 使用EzHttp框架 开发基于HTTP协议的CS轻应用

    框架概述 EzHttp是临时起意构思和开发的一个框架,目的在于简化CS轻应用开发过程.开发语言是C#. 普通的基于HTTP的应用开发基本上是RESTful的,客户端调用封装需要人工写代码,就算利用三方 ...

  7. hdu1054最小顶点覆盖

    最小定点覆盖是指这样一种情况: 图G的顶点覆盖是一个顶点集合V,使得G中的每一条边都接触V中的至少一个顶点.我们称集合V覆盖了G的边.最小顶点覆盖是用最少的顶点来覆盖所有的边.顶点覆盖数是最小顶点覆盖 ...

  8. TPshop手机新模板的用户消息实现

    今天在开发TPshop的手机新模板的消息页面,姑且记录一下. 首先,点击下方右上角,进入消息页面: 数据库中目前模拟了三条数据,有: 点击上图右上角,有: 这个 消息设置 功能是新增的,而且类型由原本 ...

  9. 简易版DES加密和解密详解

    在DES密码里,是如何进行加密和解密的呢?这里采用DES的简易版来进行说明. 二进制数据的变换 由于不仅仅是DES密码,在其它的现代密码中也应用了二进制数据,所以无论是文章还是数字,都需要将明文变换为 ...

  10. js事件触发(一)

    今日和一位前端童鞋聊了下js触发事件的两种形式: 第一种在jsp/vm上做类似onClick=functionName()的触发:另一种是在js文件中增加对应节点的监听事件触发.前者页面掺杂了js的内 ...