Независимые компоненты в начальном пакете

Вопрос или проблема

provideRouter(
  {..},
  {
    path: 'news',
    loadChildren: () => import('./news/news.module').then((m) => m.NewsModule),
    canMatch: [() => enabledFeatures.newsSection],
    canActivate: [authGuardCanActivate],
  }
)

@NgModule({
  imports: [NewsRoutingModule, NgxsModule.forFeature(newsStateObjects)],
})
export class NewsModule {}

@NgModule({
  imports: [RouterModule.forChild(
    { path: '', component: NewsDashboardComponent },
  )],
  exports: [RouterModule],
})
export class NewsRoutingModule {}

@Component({
  selector: 'app-news-item',
  templateUrl: './news-item.component.html',
  styleUrls: ['./news-item.component.scss'],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
NgOptimizedImage, MiddleClickDirectiveDirective, NgClass, NewsItemUserLabelsComponent, DatePipe, 
    TranslateModule, TimeAgoPipe, MatCard, MatCardTitle, MatCardSubtitle,
    MatCardContent, MatTooltip, MatCardActions, MatButton, MatIcon,
  ],
})
export class NewsItemComponent {}

Ответ или решение

Постановка проблемы: Компоненты, не подлежащие загрузке в начальный пакет

При работе с Angular 18 ключевым аспектом оптимизации производительности является уменьшение объема начального пакета (initial bundle). При использовании плагина source-map-explorer вы заметили, что три компонента, все из которых являются отдельными (standalone) компонентами вашего модуля, попадают в начальный пакет, несмотря на то, что они используются исключительно внутри этого модуля. Это соответствует правильной работе ленивой загрузки (lazy loading), но проблема все же остается.

Возможные причины и решения

1. Проблемы с ленивой загрузкой (Lazy Loading):

   • Убедитесь, что NewsModule действительно загружается лениво. Для этого проверьте настройки вашего маршрутизатора и убедитесь, что путь к модулю настроен корректно. Если модуль загружается в начальный пакет, возможно, маршруты выполняются некорректно.

2. Импорт компонентов в модули:

   • Проверяйте, как вы импортируете компоненты в вашем модуле. Если вы используете @NgModule вместе с компонентами, убедитесь, что они не включены в declarations. Для отдельного компонента эта практика не требуется, если он используется только через роутер.

3. Обновления и баги Angular:

   • Поскольку используется Angular 18, проверьте наличие последних обновлений или известных ошибок в рамках версии. Иногда проблемы с оптимизацией пакетов могут быть связаны с конкретными версиями. Сложите свои зависимости в package.json, затем выполните npm update, чтобы обновить все библиотеки.

4. Обратите внимание на импорт и использование:

   • Убедитесь, что компоненты действительно используются в шаблонах и не включены в случайные импорты других компонентов, которые могут их тянуть в начальный пакет. Если компонент используется внутри других компонентов, но не является их первоначальным зависимым компонентом, он может быть загружен.

5. Проверьте использование Directive:

   • В вашем компоненте NewsItemComponent используется директива MiddleClickDirectiveDirective. Проверьте, не организует ли эта директива какой-либо declaration, который может повлиять на загрузку. Если директива является штатной и не используется напрямую в других местах приложения, это может привести к ненужной загрузке.

6. Профилирование с использованием Angular DevTools:

   • Используйте инструменты для профилирования, такие как Angular DevTools, чтобы проанализировать, какие именно компоненты загружаются. Это даст более глубокое понимание структуры вашего приложения и поможет установить, какие именно зависимости входят в начальный пакет.

Заключение

Оптимизация начального пакета является критически важной для производительности приложений на Angular. Обратите внимание на способы импорта и использование маршрутов, а также на их взаимодействие с компонентами, чтобы минимизировать ненужные зависимости и достижения. Регулярно профилируйте ваше приложение, особенно при внесении изменений, чтобы избежать ненужной нагрузки при загрузке страниц. Успехов в оптимизации вашего Angular приложения!