Генерируются ли все компоненты в сборке для продакшна?

При создании приложения на Angular важно понимать, как работает процесс сборки, особенно в продакшн-режиме. Данный вопрос касается того, как Angular обрабатывает компоненты при сборке вашего приложения, особенно когда дело доходит до оптимизации и уменьшения размера финального бандла.

Что такое продакшн-сборка в Angular?

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

ng serve

Это запустит приложение в режиме разработки, где включены такие функции, как Hot Module Replacement и более подробные сообщения об ошибках. Однако для развертывания приложения на сервере необходимо создать сборку для продакшна, которая обычно выполняется с помощью команды:

ng build --prod

Эта команда выполняет несколько оптимизаций, таких как минификация, углубленная компиляция и удаления неиспользуемого кода.

Генерация компонентов

Теперь перейдем к основной части вашего вопроса — генерируются ли все компоненты в сборке для продакшна?

Пример использования ленивой загрузки

Создайте новый модуль и компонент:

ng generate module lazy --route lazyRouteName --module app.module
ng generate component lazy/lazy-component

Файл lazy-routing.module.ts будет выглядеть так:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LazyRoutingModule { }

Теперь, когда пользователь переходит по маршруту, соответствующему lazyRouteName, компонент LazyComponent будет загружен и сгенерирован.

Заключение

Таким образом, в продакшн-сборке Angular включаются только те компоненты, которые реально используются в коде. Это делает сборку более легкой и оптимизированной. Чтобы удостовериться, что ваши компоненты загружаются эффективно, следите за тем, чтобы лишние компоненты не оставались неиспользуемыми в коде и используйте ленивую загрузку для модулей, когда это возможно.