Nx의 Angular 라이브러리에서 보조 진입점을 사용하는 이유와 방법

사진 제공: Sangga Rima Roman Selia on Unsplash

Nx Devtools는 최근version 13.1 Angular 라이브러리를 위한 매우 편리한 생성기와 함께 제공되는 릴리스creates secondary entrypoints for your Angular Libraries를 쉽게 사용할 수 있습니다. 이 블로그 게시물에서는 이 새로운 기능을 사용해야 하는 이유와 방법에 대해 설명합니다.

보조 진입점이 의미 있는 이유는 무엇입니까?

보조 진입점을 추가하면 기본적으로 Angular 라이브러리가 Angular Material처럼 여러 청크로 분할됩니다.
예:

// One entrypoint: 
import { MatButtonModule, MatCardModule } from '@angular/material';

// With secondary entrypoints:
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

이 아이디어는 전혀 새로운 것이 아닙니다. 이 옵션은 ng-packagr 의 시작 단계부터 이미 존재합니다. 보조 진입점을 활용하여 더 나은 아키텍처, 트리 쉐이킹 지원, 더 작은 번들 크기 및 더 빠른 애플리케이션을 목표로 합니다.

데모 👀

그 영향을 보여주기 위해 작은 예를 준비했습니다.
따라서 작은greeter 라이브러리와 이 인사말 라이브러리에서 구성 요소 하나만 사용하는 간단한 테스트 앱을 만들었습니다.

다음은 simple greeter 및 fancy greeter를 포함하는 인사 라이브러리입니다.

// simple-greeter.component.ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'kauppfbi-blogs-simple-greeter',
  template: ` <p>Nice to meet you, {{ name }}!</p> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SimpleGreeterComponent {
  @Input() name!: string;
}

// fancy-greeter.component.ts
...
import moment from 'moment';

@Component({
  selector: 'kauppfbi-blogs-fancy-greeter',
  template: `
    <p>Nice to meet you, {{ name }}!</p>
    <p>Today is the {{ time }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FancyGreeterComponent implements OnInit {
  time = '';
  @Input() name!: string;

  ngOnInit(): void {
    this.time = moment().format('DD.MM.YYYY');
  }
}

둘 다 라이브러리의 index.ts 파일(공용 API)로 내보냅니다.

export * from './lib/simple-greeter/simple-greeter.module';
export * from './lib/simple-greeter/simple-greeter.component';

export * from './lib/fancy-greeter/fancy-greeter.module';
export * from './lib/fancy-greeter/fancy-greeter.component';

fancy greeter가 moment를 수입한다는 것을 알아차렸을 것입니다. 이것이 어디로 연결되는지 이미 알고 있습니다.

우리의 test-app도 간단하게 유지됩니다.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SimpleGreeterModule } from '@kauppfbi-blogs/greeter';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SimpleGreeterModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

// app.component.ts
@Component({
  selector: 'kauppfbi-blogs-root',
  template: `<kauppfbi-blogs-simple-greeter [name]="name"></kauppfbi-blogs-simple-greeter>`,
})
export class AppComponent {
  name = 'Duke';
}

데모를 완료하기 위해 webpack-bundle-analyzer를 사용하여 앱의 프로덕션 번들을 검사합니다.

# build app with production configuration and generate bundle statistics
npx nx test-app:build:production --stats-json
# inspect the bundle
npx webpack-bundle-analyzer dist/apps/test-app/stats.json

이렇게 하면 앱의 청크가 포함된 새 웹페이지가 열립니다.

보시다시피 우리의 번들은 moment 를 사용하지 않았지만 간단한 인사말을 사용했지만 크게 fancy greeter 로 구성됩니다. 🐵

새로운 발전기를 사용하는 방법?

이제 알고 있듯이 Angular 라이브러리에서 보조 진입점을 사용하는 것이 합리적인 이유를 사용하는 방법을 살펴보겠습니다.

하나의 명령일 뿐이므로 매우 간단합니다.

npx nx generate @nrwl/angular:library-secondary-entry-point \
--name=my-secondary-entrypoint \
--library=my-library

또는 Nx 콘솔:


이 명령은 새 src 파일에서 내보낸 Readme , package.json 및 module가 있는 index.ts 폴더를 포함하는 entrypint의 이름으로 새 폴더를 스캐폴딩합니다. 또한 전체 라이브러리 프로젝트의 lintFilePattern를 조정하고 pathMapping에서 올바른 tsconfig.base.json를 생성합니다.

이제 기존 모듈을 여기로 이동하거나 새 모듈을 만들 수 있습니다.
우리의 사용 사례에서는 코드를 이동하는 데 2분이면 충분했습니다.

결과를 분석해 보겠습니다.

우선 번들 크기가 상당히 줄어든 것을 확인할 수 있습니다. 좋습니다. 이것은 단지 데모일 뿐이며 요즘에는 moment를 전혀 사용하지 않는 것이 좋습니다. 그러나 더 중요한 것은 필요한 코드만 로드하고 솔루션으로 적절한 트리 쉐이킹을 지원할 수 있다는 것을 확인했습니다!

이미 끝났습니다. 행복한 코딩하세요! 🚀

GitHub 리포지토리

모든 코드는 Github의 public repository에서 사용할 수 있습니다. greeter library here 및 test-app here 을 찾을 수 있습니다.

추가 링크 🔗

seondary entrypoints에 대해 자세히 알아보려면 다음 블로그 게시물을 확인하세요.

Improve SPA performance by splitting your Angular libraries in multiple chunks by Kevin Kreuzer

Creating Secondary Entry Points for your Angular Library by Christian Ing Sunardi