這次帶給大家angular6.0實作元件懶載入功能(附程式碼),angular6.0實作元件懶載入功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
我們常常會遇到這樣一個問題,當我們使用一個第三方控制庫的時候,我們只用到了其中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 {}
<p #ele> <lazy-test></lazy-test> </p>
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; } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是angular6.0實作元件懶載入功能(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!