|
基于angular6.0实现的一个组件懒加载功能示例
这篇文章主要介绍了基于angular6.0实现的一个组件懒加载功能示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中 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 {}
export class LazyTestModule extends LazyComponentModuleBase { getComponentByName(key: string): Type any { return LazyTestComponent; 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。 (责任编辑：admin) |