코드 분할과 다중 진입 지점

    버전 21.0.0부터는 Ignite UI for Angular 다중 진입점을 지원하여 더 나은 트리 셰이킹, 코드 분할, 컴포넌트의 게으른 로딩이 가능해졌습니다. 이 아키텍처 개선 덕분에 필요한 컴포넌트와 유틸리티만 가져올 수 있어 애플리케이션의 번들 크기를 크게 줄일 수 있습니다.

    개요

    이전에는 모든 Ignite UI for Angular 부품이 단일 진입점igniteui-angular ()에서 내보내졌습니다. 편리하긴 했지만, 이 방법은 모든 컴포넌트를 묶어 빌드 도구가 사용하지 않는 코드를 효과적으로 제거하기 어렵게 만들었습니다.

    새로운 다중 진입점 아키텍처에서는 각 구성 요소 또는 관련 구성 요소 그룹이 전용 진입점을 갖게 되었습니다. 이로 인해 현대 번들러는 다음과 같은 기능을 할 수 있습니다:

    • 코드 분할 활성화- 각 컴포넌트를 필요에 따라 따로 레이지-로드할 수 있습니다
    • 초기 번들 크기 축소- 초기 로드에서 애플리케이션이 실제로 필요한 것만 가져오세요
    • 빌드 성능 향상- 의존성 그래프가 작을수록 빌드가 더 빨라집니다

    Benefits

    ✅ 코드 분할- 각 구성 요소는 게으른 로딩 가능합니다
    ✅ 초기 소량 번들- 필요한 것만 가져오기
    ✅ 성능 향상- 개별 번들 크기가 줄어들어 로딩 시간이 빨라집니다
    ✅ 클린 아키텍처- 순환 의존성 없음
    ✅ 완전 하위 호환성- 메인 진입 지점은 여전히 작동합니다
    ✅ Granular Grid 가져오기- 필요한 특정 그리드 유형만 불러오세요

    Entry Points Structure

    Core Entry Points

    • igniteui-angular/core- 핵심 유틸리티, 서비스 및 기본 유형(예:IgxOverlayService​
    • igniteui-angular/directives- 공통 지침

    Component Entry Points

    각 구성 요소는 다음과 같은 패턴igniteui-angular/<component-name>에 따라 고유한 진입 지점을 가집니다:

    • igniteui-angular/accordion
    • igniteui-angular/action-strip
    • igniteui-angular/avatar
    • igniteui-angular/badge
    • igniteui-angular/banner
    • igniteui-angular/bottom-nav
    • igniteui-angular/button
    • igniteui-angular/button-group
    • igniteui-angular/calendar
    • igniteui-angular/card
    • igniteui-angular/carousel
    • igniteui-angular/chat
    • igniteui-angular/checkbox
    • igniteui-angular/chips
    • igniteui-angular/combo
    • igniteui-angular/date-picker
    • igniteui-angular/date-range-picker
    • igniteui-angular/dialog
    • igniteui-angular/drop-down
    • igniteui-angular/expansion-panel
    • igniteui-angular/icon
    • igniteui-angular/input-group
    • igniteui-angular/list
    • igniteui-angular/navbar
    • igniteui-angular/navigation-drawer
    • igniteui-angular/paginator
    • igniteui-angular/progressbar
    • igniteui-angular/query-builder
    • igniteui-angular/radio
    • igniteui-angular/select
    • igniteui-angular/simple-combo
    • igniteui-angular/slider
    • igniteui-angular/snackbar
    • igniteui-angular/splitter
    • igniteui-angular/stepper
    • igniteui-angular/switch
    • igniteui-angular/tabs
    • igniteui-angular/time-picker
    • igniteui-angular/toast
    • igniteui-angular/tree

    Grid Entry Points

    그리드 컴포넌트는 최적의 코드 분할을 위해 세분화된 진입점으로 나뉩니다:

    • igniteui-angular/grids/core- 공유 그리드 인프라 (열, 툴바, 필터링, 정렬, 파이프, 유틸리티)
    • igniteui-angular/grids/grid- 데이터 그리드 구성 요소 (IgxGridComponent)
    • igniteui-angular/grids/tree-grid- 트리 그리드 구성 요소 (IgxTreeGridComponent)
    • igniteui-angular/grids/hierarchical-grid- 계층적 격자 구성 요소 (IgxHierarchicalGridComponent,IgxRowIslandComponent)
    • igniteui-angular/grids/pivot-grid - Pivot Grid component (IgxPivotGridComponent, IgxPivotDataSelectorComponent)

    Migration

    Automatic Migration

    권장되는 방법은 작업 중에ng update 자동으로 가져오기를 마이그레이션하는 것입니다. 버전 21.0.0으로 업데이트할 때 가져오기 마이그레이션 안내가 뜹니다:

    ng update igniteui-angular

    "예"를 선택해 번들 크기를 최적화하기 위해 가져오기를 새로운 진입 지점으로 이동하세요.

    또는 마이그레이션을 별도로 실행할 수도 있습니다:

    ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

    Manual Migration

    수동으로 마이그레이션하거나 특정 가져오기를 업데이트해야 한다면 다음 패턴을 따르세요:

    이전 (v20.x 및 그 이전)

    import { 
  IgxGridComponent,
  IgxTreeGridComponent,
  IgxInputDirective,
  IgxBottomNavComponent,
  Direction, 
  GridBaseAPIService,
  IgxOverlayService,
  IFilteringExpression
} from 'igniteui-angular';

    After (v21.0.0)

    import { IgxOverlayService } from 'igniteui-angular/core';
import { IFilteringExpression, GridBaseAPIService } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
import { IgxInputDirective } from 'igniteui-angular/input-group';
import { IgxBottomNavComponent } from 'igniteui-angular/bottom-nav';
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';

    Type Renames

    새로운 아키텍처와의 명명 충돌을 피하기 위해 일부 유형은 다음과 같이 이름이 변경되었습니다:

    • Direction→CarouselAnimationDirection (회전목마 입구에서)
    // Before
import { Direction } from 'igniteui-angular';

// After
import { CarouselAnimationDirection } from 'igniteui-angular/carousel';

    Backwards Compatibility

    주요 진입점(igniteui-angular)은 모든 세분화된 진입점을 재내보내 완전한 하위 호환성을 유지합니다. 메인 진입점에서 가져오는 파일을 변경 없이 계속 사용할 수 있습니다:

    // This still works and will continue to work
import { IgxGridComponent, IgxButtonDirective } from 'igniteui-angular';

    하지만 더 나은 나무 흔들림과 더 작은 묶음 크기를 누리기 위해 새로운 진입 지점으로 이전하는 것을 강력히 권장 합니다.

    Usage Examples

    Example 1: Simple Component Usage

    버튼과 입력만 필요하다면, 그 진입 지점만 가져오세요:

    import { Component } from '@angular/core';
import { IgxButtonDirective } from 'igniteui-angular/button';
import { 
  IgxInputGroupComponent, 
  IgxInputDirective, 
  IgxLabelDirective 
} from 'igniteui-angular/input-group';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [
    IgxButtonDirective,
    IgxInputGroupComponent,
    IgxInputDirective,
    IgxLabelDirective
  ],
  template: `
    <igx-input-group>
      <label igxLabel>Name</label>
      <input igxInput type="text" />
    </igx-input-group>
    <button igxButton="contained">Submit</button>
  `
})
export class FormComponent {}

    Example 2: Grid with Specific Features

    필요한 그리드 유형과 핵심 그리드 유틸리티만 가져오세요:

    import { Component } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
import { IgxGridToolbarComponent } from 'igniteui-angular/grids/core';

@Component({
  selector: 'app-data-grid',
  standalone: true,
  imports: [IgxGridComponent, IgxGridToolbarComponent],
  template: `
    <igx-grid [data]="data" [autoGenerate]="true">
      <igx-grid-toolbar></igx-grid-toolbar>
    </igx-grid>
  `
})
export class DataGridComponent {
  public data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ];
}

    Example 3: Lazy Loading Components

    새로운 진입 지점 덕분에 부품을 쉽게 레이디 로드할 수 있습니다:

    // app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'grid',
    loadComponent: () => 
      import('./features/grid/grid.component')
        .then(m => m.GridComponent)
  },
  {
    path: 'tree-grid',
    loadComponent: () => 
      import('./features/tree-grid/tree-grid.component')
        .then(m => m.TreeGridComponent)
  }
];

    // features/grid/grid.component.ts
import { Component } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [IgxGridComponent],
  template: `<igx-grid [data]="data" [autoGenerate]="true"></igx-grid>`
})
export class GridComponent {
  public data = [];
}

    Migration Options Summary

    v21.0.0으로 업데이트할 때 세 가지 옵션이 있습니다:

    ng update igniteui-angular

    알림이 나오면 "예"를 선택해 가져오기를 이동하세요.

    Option 2: Keep Using Main Entry Point

    ng update igniteui-angular

    메시지가 뜨면 "아니오"를 선택해 메인 진입 지점을 계속 사용하세요. 라이브러리는 완전히 하위 호환을 유지하지만, 최적의 번들 크기의 혜택을 누리지는 못할 것입니다.

    Option 3: Migrate Later

    마이그레이션 없이 업데이트하기 (알림 시 "아니오" 선택):

    ng update igniteui-angular

    나중에 수동으로 마이그레이션하세요:

    ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0

    Best Practices

    1. 특정 진입점 사용- 가장 구체적인 진입점에서 가져오기 (예:igniteui-angular/grids/grid 대신igniteui-angular)
    2. 레이지 로딩을 활용 하세요 - 진입 지점과 Angular의 레이지 로딩을 결합해 더 나은 성능을 만듭니다
    3. 필요한 것만 가져오세요- 서비스 하나만 필요하다면 전체core 진입 지점을 가져오지 마세요
    4. Check bundle analyzer - Use tools like webpack-bundle-analyzer to verify your bundle size improvements
    5. 정기적으로 업데이트하세요- 최신 최적화를 위해 Ignite UI for Angular 버전을 최신 상태로 유지하세요

    Additional Resources

    API References

    특정 컴포넌트와 그 API에 대한 자세한 정보는 컴포넌트 문서를 참조하십시오: