基于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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
Js获取事件对象代码
2010/08/05 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
极简的Python入门指引
2015/04/01 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
市场部经理岗位职责
2014/04/10 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
python中的plt.cm.Paired用法说明
2021/05/31 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android