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

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

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

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

ng serve

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

ng build --prod

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

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

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

1. Компоненты, используемые в приложении: Все компоненты, которые импортированы и используются в вашем приложении, будут включены в финальный бандл. Это значит, если вы создали компонент и использовали его хотя бы в одном шаблоне, он будет сгенерирован для продакшна.
2. Неиспользуемые компоненты: Однако, если у вас есть компоненты, которые вы создали, но не используете ни в одном месте, Angular не будет включать их в сборку. Это значит, что они будут "удалены" при сборке, что позволяет сократить размер вашего приложения и улучшить производительность.
3. Lazy Loading: Angular также поддерживает ленивую загрузку (lazy loading) для модулей. Это позволяет загружать компоненты только тогда, когда они действительно нужны, а не загружать все компоненты сразу. Таким образом, если у вас есть ленивые загружаемые модули, связанный с ними компонент загрузится только при навигации к этому модулю.

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

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

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 включаются только те компоненты, которые реально используются в коде. Это делает сборку более легкой и оптимизированной. Чтобы удостовериться, что ваши компоненты загружаются эффективно, следите за тем, чтобы лишние компоненты не оставались неиспользуемыми в коде и используйте ленивую загрузку для модулей, когда это возможно.