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

首先说明一点,除了页面外的这些其他组件,本质上是没有实现懒加载的,只是通过将其进行模块化,在合适的页面加载时,进行加载,从而基于页面的懒加载机制间接实现了懒加载。

1. 实现模块化

1.1. 示例上下文描述:

1、我们集成了md2ngx-datatableng2-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 },并在@NgModuleimports部分进行声明,其他的DirectivePipe不需要;

2)、因为是独立的模块,所以该模块需要依赖的第三方模块必须引入,并在@NgModuleimports部分进行声明,比如ngx-datatablemd2ng2-tree相关的Module;

3)、一个ComponentDirectivePipe,不能同时在有依赖关系的多个模块中进行declarationsexports,这本身就是一种重复引入,会造成冲突。所以这样在最顶级的模块app.module.ts中就要删掉对这些组件的declarationsexports

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)、因为是独立的模块,所以如果想直接使用第三方的组件,比如这里想使用md2datepicker组件,依然需要使用如下两种方式中的一种进行引入:

  • 直接引入:就如同上面的实例代码中所示,直接import { Md2Module } from 'md2';,并且在@NgModule中的imports中声明。
  • 间接引入:在引入的其他模块中,例如MyCompModule中,exports涉及到md2相关的模块,代码示例如下:

    将1.2.1节中的mycomp.module.ts改造如下:
...
@NgModule({
...
exports: [
...
Md2Module
]
})
export class MyCompModule {}

好了,这样就实现了其他组件的模块化,并可以通过页面的懒加载机制,实现组件的懒加载。

2. 多页面使用模块重复加载问题

但是是否使用模块化,在对应的懒加载页面,间接实现组件的懒加载,还需要根据情况确定。

例如,如果我们将md2ngx-datatableng2-tree三套控件库通过模块引入的方式,独立引入懒加载页面home.tslist.ts,但是没有在最顶级的模块app.module.ts中,引入该模块,则会在每个页面编译的结果中,都独立加载以上三套控件库对应代码,造成每个页面都很大,如下图所示:

虽然这样main.js小了一点,但是home.ts对应的0.main.jslist.ts对应的1.main.js都变为了1M多,这样也严重影响了页面的加载速度,如何解决呢?很简单,只需要在最顶级的模块app.module.ts中,引入跨多个页面使用的模块,Ionic在编译的时候,就会自动判断,如果在父级模块中有了,子级模块就不会再冗余编译进去了,是不是很智能:

哈哈,所以这里又引入了一个问题,模块的合理划分,将是一个很重要的问题。

参考

Ionic and Lazy Loading Pt 1

Ionic and Lazy Loading Pt 2

Ionic3新特性--页面懒加载2加载其他组件的更多相关文章

  1. Ionic3新特性--页面懒加载1

    Ionic3新的懒加载机制给我带来了如下新特性: 避免在每一个使用到某Page的Module或其他Page中重复的import这个类(需要写一堆路径) 允许我们通过字符串key在任何想使用的地方获取某 ...

  2. iOS开发实用技巧—项目新特性页面的处理

    iOS开发实用技巧篇—项目新特性页面的处理 说明:本文主要说明在项目开发中会涉及到的最最简单的新特性界面(实用UIScrollView展示多张图片的轮播)的处理. 代码示例: 新建一个专门的处理新特性 ...

  3. iOS中的项目新特性页面的处理

    一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...

  4. ES6的新特性(20)—— Module 的加载实现

    Module 的加载实现 上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 浏览器加载 传统方法 HTML 网页中, ...

  5. 使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例

    当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件 ...

  6. Android5.0新特性:RecyclerView实现上拉加载更多

    RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...

  7. ActiveReports 报表控件V12新特性 -- 页面报表新增子报表

    ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...

  8. Windows Phone 8.1 新特性 - 页面导航

    本篇介绍一下Windows Phone 8.1 中页面导航的实现方式. 大家对Windows Phone 8 中页面导航的实现一定不陌生,我们使用 NavigationService 来实现.具体写法 ...

  9. ExtJS的4.1新特性简要介绍

    ExtJS的4.1新特性简要介绍 一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...

随机推荐

  1. 区分词法作用域(js)与动态作用域(精!)

    在js学习中,词法作用域是必须要掌握的! 在这里,我将总结一下<你不知道的JS>一书中词法作用域的重点并分享给大家! 首先带来一段代码示例: function foo(){ console ...

  2. Winform 使用DotNetBar 根据菜单加载TabControl

    winform 如何使用TabControl 控件来做winform界面框架? 这样的效果: 首先菜单的窗口展示的承载器为TabControl 控件,这个控件本身包含多页面预览和页面初始化. 如图所示 ...

  3. webrtc学习笔记2(Android端demo代码结构)

    最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...

  4. Attribute注解

    class Program { static void Main(string[] args) { //Attribute注解,Attribute是附加到方法.属性.类等上面的特殊的标签,在类Type ...

  5. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  6. hdu1160dp

    https://vjudge.net/contest/68966#problem/J #include<map> #include<set> #include<list& ...

  7. 详解MySQL存储过程的“异常处理”

    阅读目录:存储过程的异常处理 定义异常处理 单一异常处理程序 continue exit 多个异常处理程序 关于错误编号和SQLSTATE码 使用3个处理程序 忽略某一异常的处理 异常处理的命名 异常 ...

  8. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  9. druid抛出的异常------javax.management.InstanceAlreadyExistsException引发的一系列探索

    最近项目中有个定时任务的需求,定时检查mysql数据与etcd数据的一致性,具体实现细节就不说了,今天要说的就是实现过程中遇到了druid抛出的异常,以及解决的过程 异常 异常详细信息 五月 05, ...

  10. UI-UIwindow

    1.什么是UI? UI  (User Interface) : 用户界面,用户看到的各种各样的页面元素: 2.什么是UIWindow ? UIWindow : 一个基础容器,往窗口上放不同的东西,每个 ...