基于angular6.0实现的一个组件懒加载功能示例


Posted in Javascript onApril 12, 2018

我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪。又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能。或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间。一切都在用户不知不觉中进行。大大增加用户体验,特别是中大型项目,优化必备!

项目地址github

安装

yarn add iwe7-lazy-load

使用

import { Iwe7LazyLoadModule, LazyComponentsInterface } from 'iwe7-lazy-load';
// 用到的懒加载组件
let lazyComponentsModule: LazyComponentsInterface[] = [
 {
 // 组件的selector
 path: 'lazy-test',
 // 组件的相对地址
 loadChildren: './lazy-test/lazy-test.module#LazyTestModule'
 }
];
@NgModule({
 imports: [Iwe7LazyLoadModule.forRoot(lazyComponentsModule)],
 // 注意加上这些
 schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class AppModule {}
<div #ele>
 <lazy-test></lazy-test>
</div>
import { LazyLoaderService } from 'iwe7-lazy-load';

@ViewChild('ele') ele: ElementRef;
constructor(
 public lazyLoader: LazyLoaderService,
 public view: ViewContainerRef
) {}

ngOnInit() {
 // 开始渲染懒组件
 this.lazyLoader.init(this.ele.nativeElement, this.view);
}

定义懒加载组件 demo

import { LazyComponentModuleBase } from 'iwe7-lazy-load';
@Component({
 selector: 'lazy-test',
 template: ` i am a lazy`
})
export class LazyTestComponent {}

@NgModule({
 imports: [
 RouterModule.forChild([{
  path: '',
  component: LazyTestComponent
 }])
 ],
 declarations: [LazyTestComponent]
})
export class LazyTestModule extends LazyComponentModuleBase {
 getComponentByName(key: string): Type<any> {
 return LazyTestComponent;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
判断用户是否在线的代码
Mar 05 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 #Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
Koa项目搭建过程详细记录
Apr 12 #Javascript
React props和state属性的具体使用方法
Apr 12 #Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 #Javascript
关于vue中 $emit的用法详解
Apr 12 #Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 #Javascript
You might like
PHP编程函数安全篇
2013/01/08 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python实现购物车程序
2018/04/16 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
为什么使用接口?
2014/08/13 面试题
化学教师自荐信范文
2013/12/28 职场文书
网络管理员岗位职责
2014/03/17 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
基层党员对照检查材料
2014/08/25 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
教代会开幕词
2015/01/28 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers
介绍一下28个JS常用数组方法
2022/05/06 Javascript