溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例

發(fā)布時(shí)間：2020-09-19 11:57:57 來源：腳本之家 閱讀：106 作者：楊明明abc 欄目：web開發(fā)

我們常常會(huì)遇到這樣一個(gè)問題，當(dāng)我們使用一個(gè)第三方控件庫的時(shí)候，我們只用到了其中 1 個(gè)或某幾個(gè)組件，會(huì)連帶一大堆無用的東西，造成體積臃腫不堪。又或者首頁用到的組件較多，首頁加載速度緩慢，這個(gè)時(shí)候，我們或許需要加載用戶可視范圍內(nèi)用到的組件，隨著用戶的瀏覽下拉，我們?cè)偃ゼ虞d這些組件，漸進(jìn)式加載,漸進(jìn)式體驗(yàn)，這個(gè)時(shí)候你或許就用到了本工具所實(shí)現(xiàn)的功能?；蛘咭粋€(gè)頁面的某些不重要區(qū)域，比如第三方廣告又或者不重要的元素，可以采用懶加載懶渲染，降低用戶首屏等待時(shí)間。一切都在用戶不知不覺中進(jìn)行。大大增加用戶體驗(yàn)，特別是中大型項(xiàng)目，優(yōu)化必備！

項(xiàng)目地址github

安裝

yarn add iwe7-lazy-load

使用

import { Iwe7LazyLoadModule, LazyComponentsInterface } from 'iwe7-lazy-load';
// 用到的懶加載組件
let lazyComponentsModule: LazyComponentsInterface[] = [
 {
 // 組件的selector
 path: 'lazy-test',
 // 組件的相對(duì)地址
 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;
 }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手