Ionic3新特性--页面懒加载2加载其他组件
在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component
、Pipe
、Directive
等的模块化,和加载使用。
首先说明一点,除了页面外的这些其他组件,本质上是没有实现懒加载的,只是通过将其进行模块化,在合适的页面加载时,进行加载,从而基于页面的懒加载机制间接实现了懒加载。
1. 实现模块化
1.1. 示例上下文描述:
1、我们集成了md2
、ngx-datatable
、ng2-tree
三套控件库;
2、我们自己写了一些简单的Component
:
3、在home.ts
这个page中需要使用到这些自己写的Component
,而且home.ts
这个page是基于Ionic的懒加载机制进行编写加载的。
1.2. 实现要点描述
1.2.1. 声明相关的Module
在自定义Component
所在的demo
文件夹下新建模块声明文件mycomp.module.ts
:
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { TreeModule } from 'ng2-tree';
import { Md2Module } from 'md2';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { MyTree } from './mytree';
import { Collapse } from './collapse';
import { Accordion } from './accordion';
import { MyDataTable } from './mydatatable';
@NgModule({
declarations: [
MyTree,
Collapse,
Accordion,
MyDataTable
],
imports: [
IonicModule,
TreeModule,
Md2Module,
NgxDatatableModule
],
exports: [
MyTree,
Collapse,
Accordion,
MyDataTable
]
})
export class MyCompModule {}
关键点描述:
1)、对于Component
来说,必须import { IonicModule }
,并在@NgModule
的imports
部分进行声明,其他的Directive
和Pipe
不需要;
2)、因为是独立的模块,所以该模块需要依赖的第三方模块必须引入,并在@NgModule
的imports
部分进行声明,比如ngx-datatable
、md2
、ng2-tree
相关的Module;
3)、一个Component
、Directive
和Pipe
,不能同时在有依赖关系的多个模块中进行declarations
和exports
,这本身就是一种重复引入,会造成冲突。所以这样在最顶级的模块app.module.ts
中就要删掉对这些组件的declarations
和exports
。
1.2.2. 在懒加载的Page
中引入
先看代码:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TestTreeComponentModule } from '../../../components/test-tree/test-tree.module'
import { MyCompModule } from '../../../pages/demo/mycomp.module'
import { Md2Module } from 'md2';
@NgModule({
declarations: [
HomePage
],
imports: [
TestTreeComponentModule,
IonicPageModule.forChild(HomePage),
MyCompModule,
Md2Module.forRoot()
],
exports: [
HomePage
]
})
export class HomePageModule {}
关键点描述:
1)、通过引入MyCompModule,引入了自定义的所有组件;
2)、因为是独立的模块,所以如果想直接使用第三方的组件,比如这里想使用md2
的datepicker
组件,依然需要使用如下两种方式中的一种进行引入:
- 直接引入:就如同上面的实例代码中所示,直接
import { Md2Module } from 'md2';
,并且在@NgModule
中的imports
中声明。 - 间接引入:在引入的其他模块中,例如
MyCompModule
中,exports
涉及到md2
相关的模块,代码示例如下:
将1.2.1节中的mycomp.module.ts
改造如下:
...
@NgModule({
...
exports: [
...
Md2Module
]
})
export class MyCompModule {}
好了,这样就实现了其他组件的模块化,并可以通过页面的懒加载机制,实现组件的懒加载。
2. 多页面使用模块重复加载问题
但是是否使用模块化,在对应的懒加载页面,间接实现组件的懒加载,还需要根据情况确定。
例如,如果我们将md2
、ngx-datatable
、ng2-tree
三套控件库通过模块引入的方式,独立引入懒加载页面home.ts
和list.ts
,但是没有在最顶级的模块app.module.ts
中,引入该模块,则会在每个页面编译的结果中,都独立加载以上三套控件库对应代码,造成每个页面都很大,如下图所示:
虽然这样main.js
小了一点,但是home.ts
对应的0.main.js
和list.ts
对应的1.main.js
都变为了1M多,这样也严重影响了页面的加载速度,如何解决呢?很简单,只需要在最顶级的模块app.module.ts
中,引入跨多个页面使用的模块,Ionic在编译的时候,就会自动判断,如果在父级模块中有了,子级模块就不会再冗余编译进去了,是不是很智能:
哈哈,所以这里又引入了一个问题,模块的合理划分,将是一个很重要的问题。
Ionic3新特性--页面懒加载2加载其他组件的更多相关文章
- Ionic3新特性--页面懒加载1
Ionic3新的懒加载机制给我带来了如下新特性: 避免在每一个使用到某Page的Module或其他Page中重复的import这个类(需要写一堆路径) 允许我们通过字符串key在任何想使用的地方获取某 ...
- iOS开发实用技巧—项目新特性页面的处理
iOS开发实用技巧篇—项目新特性页面的处理 说明:本文主要说明在项目开发中会涉及到的最最简单的新特性界面(实用UIScrollView展示多张图片的轮播)的处理. 代码示例: 新建一个专门的处理新特性 ...
- iOS中的项目新特性页面的处理
一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...
- ES6的新特性(20)—— Module 的加载实现
Module 的加载实现 上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 浏览器加载 传统方法 HTML 网页中, ...
- 使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例
当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件 ...
- Android5.0新特性:RecyclerView实现上拉加载更多
RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...
- ActiveReports 报表控件V12新特性 -- 页面报表新增子报表
ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...
- Windows Phone 8.1 新特性 - 页面导航
本篇介绍一下Windows Phone 8.1 中页面导航的实现方式. 大家对Windows Phone 8 中页面导航的实现一定不陌生,我们使用 NavigationService 来实现.具体写法 ...
- ExtJS的4.1新特性简要介绍
ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...
随机推荐
- node-webkit学习之【无边框窗口用JS实现拖动改变大小等】
效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...
- 在c++中,标准输入string时cin 与getline两个函数之间的区别
cin: cin函数是标准库的输入函数,在读取string时遵循以下规则: 1)读取并忽略开头所有的空白符(包括空格.换行符.制表符). 2)读取字符直到遇到空白符,读取终止. 例如: 当输入的是“ ...
- JAVA 继承中的this和super
学习java时看了不少尚学堂马士兵的视频,还是挺喜欢马士兵的讲课步骤的,二话不说,先做实例,看到的结果才是最实际的,理论神马的全是浮云.只有在实际操作过程中体会理论,在实际操作过程中升华理论才是最关键 ...
- Laravel 5.2 教程 - 邮件
一.简介 Laravel 的邮件功能基于热门的 SwiftMailer 函数库之上,提供了一个简洁的 API.Laravel为SMTP.Mailgun.Mandrill.Amazon SES.PHP的 ...
- Ubuntu16.04安装opencv for python/c++
Ubuntu16.04安装opencv for python/c++ 网上关于opencv的安装已经有了不少资料,但是没有一篇资料能让我一次性安装成功,因此花费了大量时间去解决各种意外,希望这篇能给一 ...
- ASP.NET Web基本原理
ASP.NET Web基本原理 浏览器与服务器之间的交互 浏览器向服务器发送HTTP请求,具体如下: 1.浏览器向服务器发送TCP包,要求服务器打开连接 TCP包首部32位,占20字节,格式如图一: ...
- 学好php可以做的事情真多!
学好php能做什么?其实学好php能做的事情很多! 一. 学好php可以就业 1:大中小公司通吃. 现在几乎所有有前途的公司都会在互联网上安家.只要在网上安家,就需要找这些方面的技术人员,而且很多公司 ...
- 产品经理学Python:for循环、while循环
Python中有两种循环,分别为:for循环和while循环. 1. for循环 for循环可以用来遍历某一对象(遍历:通俗点说,就是把这个循环中的第一个元素到最后一个元素依次访问一次).for循环的 ...
- 在Windows中单机环境下创建RabbitMQ集群
本文根据:http://www.360doc.com/content/15/0312/17/20874412_454622619.shtml整理而来 RabbitMQ具有很好的消息传递性能,同时又是开 ...
- mongodb新人扫盲
前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 使用update()更新 使用save()命令实现upsert 自动更新信息 查询数据 mongoose的使用 前言 mongodb ...