欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-02 17:49:33
我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪。又或者首页用到的组件较多,首页...

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


安装

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;
 }
}

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