모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다.
- 青灯夜游앞으로
- 2022-10-18 20:46:091834검색
어떻게 angular 모듈을 지연 로드하고 라우팅 없이 모듈에 선언된 구성 요소를 동적으로 생성할 수 있나요? 다음 글에서는 그 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
환경: Angular 13.x.x
Angular는 첫 번째 화면의 크기를 줄이고 첫 번째 화면의 로딩 속도를 향상시키기 위해 라우팅을 통해 특정 페이지 모듈의 지연 로딩을 지원합니다. 그러나 이러한 라우팅 방식은 때때로 수요를 충족시킬 수 없습니다. [관련 튜토리얼 추천: "angularjs 비디오 튜토리얼"]
예를 들어, 버튼을 클릭하면 일련의 툴바 구성요소가 main.js가 기본적으로 적용되지만 사용자가 버튼을 클릭하면 구성 요소가 동적으로 로드되어 표시됩니다. <code>main.js, 而是用户点按钮后动态把组件加载并显示出来.
那为什么要动态加载呢? 如果直接在目标页面组件引入工具栏组件, 那么工具栏组件中的代码就会被打包进目标页面组件所在的模块, 这会导致目标页面组件所在的模块生成的js体积变大; 通过动态懒加载的方式, 可以让工具栏组件只在用户点了按钮后再加载, 这样就可以达到减少首屏尺寸的目的.
为了演示, 新建一个angular项目, 然后再新建一个ToolbarModule, 项目的目录结构如图
为了达到演示的目的, 我在ToolbarModule的html模板中放了个将近1m的base64图片, 然后直接在AppModule中引用ToolbarModule, 然后执行ng build, 执行结果如图
可以看到打包尺寸到达了1.42mb, 也就是说用户每次刷新这个页面, 不管用户有没有点击显示工具栏按钮, 工具栏组件相关的内容都会被加载出来, 这造成了资源的浪费, 所以下面将ToolbarModule从AppModule的imports声明中移除, 然后在用户点击首次点击显示时懒加载工具栏组件.
懒加载工具栏组件
首先, 新建一个ToolbarModule和ToolbarComponent, 并在ToolbarModule声明ToolbarComponent
toolbar.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ToolbarComponent } from './toolbar.component';
@NgModule({
declarations: [ToolbarComponent],
imports: [CommonModule],
exports: [ToolbarComponent],
})
class ToolbarModule {}
export { ToolbarComponent, ToolbarModule };toolbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'toolbar',
templateUrl: './toolbar.component.html',
styles: [
`
svg {
width: 64px;
height: 64px;
}
모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다. {
width: 64px;
height: 64px;
object-fit: cover;
}
`,
],
})
export class ToolbarComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}toolbar.component.html
<p> <svg><path></path><path></path><path></path></svg> <svg> <path></path> <path></path> <path></path> <path></path> <path></path> </svg> " alt=""> </p>
然后再AppComponent的中按钮点击事件处理程序中写加载工具栏模块的代码:
app.component.ts
import { Component, createNgModuleRef, Injector, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
selector: 'root',
template: `
<p class="container h-screen flex items-center flex-col w-100 justify-center">
<p class="mb-3"
[ngClass]="{ hidden: !isToolbarVisible }">
<ng-container #toolbar></ng-container>
</p>
<p>
<button (click)="toggleToolbarVisibility()"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{ isToolbarVisible ? '隐藏' : '显示' }}</button>
<p class="mt-3">首屏内容</p>
</p>
</p>
`,
})
export class AppComponent {
title = 'ngx-lazy-load-demo';
toolbarLoaded = false;
isToolbarVisible = false;
@ViewChild('toolbar', { read: ViewContainerRef }) toolbarViewRef!: ViewContainerRef;
constructor(private _injector: Injector) {}
toggleToolbarVisibility() {
this.isToolbarVisible = !this.isToolbarVisible;
this.loadToolbarModule().then();
}
private async loadToolbarModule() {
if (this.toolbarLoaded) return;
this.toolbarLoaded = true;
const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
const { injector } = moduleRef;
const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
injector,
ngModuleRef: moduleRef,
});
}
}关键在于其中的第32-42行, 首先通过一个动态import导入toolbar.module.ts中的模块, 然后调用createNgModuleRef并传入当前组件的Injector作为ToolbarModule的父级Injector, 这样就实例化了ToolbarModule得到了moduleRef对象, 最后就是调用html模板中声明的<ng-container></ng-container>的ViewContainerRef对象的createComponent方法创建ToolbarComponent组件
private async loadToolbarModule() {
if (this.toolbarLoaded) return;
this.toolbarLoaded = true;
const { ToolbarModule, ToolbarComponent } = await import('./toolbar/toolbar.module');
const moduleRef = createNgModuleRef(ToolbarModule, this._injector);
const { injector } = moduleRef;
const componentRef = this.toolbarViewRef.createComponent(ToolbarComponent, {
injector,
ngModuleRef: moduleRef,
});
}此时再来看下这番操作后执行ng build打包的尺寸大小
可以看到首屏尺寸没有开头那么离谱了, 原因是没有在AppModule和AppComponent直接导入ToolbarModule和ToolbarComponent, ToolbarModule被打进了另外的js文件中(Lazy Chunk Files), 当首次点击显示按钮时, 就会加载这个包含ToolbarModule的js文件
注意看下面的gif演示中, 首次点击显示按钮, 浏览器网络调试工具中会多出一个对src_app_toolbar_toolbar_module_ts.js
시연을 위해 새 각도 프로젝트를 만든 다음 새 ToolbarModule을 만듭니다. 프로젝트는 그림과 같습니다
시연을 위해 1m에 가까운 base64 이미지를 넣은 후 AppModule에서 ToolbarModule을 직접 참조한 후 ng build를 실행합니다. > 실행 결과는 그림과 같습니다
1.42mb에 도달한 것을 확인할 수 있습니다. 이는 사용자가 도구 모음 표시 버튼을 클릭했는지 여부에 관계없이 사용자가 이 페이지를 새로 고칠 때마다 이 페이지를 새로 고칠 때마다 의미합니다. , 도구 모음 구성 요소와 관련된 콘텐츠가 로드되어 리소스 낭비가 발생하므로 다음은 AppModule의 <code>imports 선언에서 ToolbarModule이 제거됩니다. 를 적용한 다음 사용자가 첫 번째 클릭을 클릭하여 표시할 때 도구 모음 구성 요소를 지연 로드합니다.🎜지연 로드 도구 모음 구성 요소
🎜먼저 새 ToolbarModule 및ToolbarComponent를 선언하고 ToolbarModuleToolbarComponent🎜🎜🎜toolbar.module.ts
rrreeetoolbar.comComponent.ts
rrreeetoolbar.comComponent.html
rrreeeAppComponent의 버튼 클릭 이벤트 핸들러에서 도구 모음 모듈을 로드하는 코드를 작성합니다.🎜import 모듈을 통해 를 가져온 다음 <code>createNgModuleRef를 호출하세요. 현재 구성 요소의 Injector를 ToolbarModuleInjector의 상위 요소로 전달하여 ToolbarModule을 인스턴스화하고 moduleRef 객체, 그리고 마지막으로 html 템플릿에 선언된 <ng-container>ViewContainerRef</ng-container> 객체의 createComponent 메소드 ;는 ToolbarComponent 컴포넌트를 생성합니다🎜rrreee🎜 이번에 살펴보겠습니다. 이 작업을 수행한 후 ng build를 실행하여 패키지합니다. 크기 🎜🎜🎜🎜할 수 있습니다 첫 번째 화면 크기가 처음만큼 크지는 않은지 확인하세요. 그 이유는 ToolbarModule을 가져온 후 <code>AppModule과 AppComponent 사이에 직접적인 링크가 없기 때문입니다. 및 ToolbarComponent, ToolbarModule을 다른 js 파일(Lazy Chunk Files)로 가져옵니다. 를 처음 클릭하면 버튼이 나타납니다. , ToolbarModule이 포함된 js 파일이 로드됩니다🎜🎜아래 gif 데모를 보시고 처음으로 브라우저 네트워크 디버깅 도구에서 Show 버튼을 클릭하세요. src_app_toolbar_toolbar_module_ts.js 파일을 한 번 더 요청해 주세요🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 모듈을 느리게 로드하고 Angular에서 해당 구성 요소를 동적으로 표시하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!