Как Angular обрабатывает шаблоны и что такое AOT/Just-in-Time компиляция?
В Angular шаблоны (templates) являются HTML-подобными структурами с Angular-расширениями (директивами, пайпами, биндингами), которые описывают, как визуально отображать компонент. Они связываются с компонентом через метаданные @Component({ template }), и Angular превращает их в JavaScript-код, который управляет отображением и логикой.
Этот процесс компиляции шаблонов может происходить двумя способами: AOT (Ahead-of-Time) и JIT (Just-in-Time). Оба механизма преобразуют шаблонный синтаксис Angular в низкоуровневые инструкции, которые обновляют DOM.
1. Как Angular обрабатывает шаблоны
1.1 Основные этапы обработки шаблонов:
-
Парсинг HTML-шаблона — Angular разбирает шаблон и находит директивы (*ngIf, ngFor, [(ngModel)], {{ }}, @Input, @Output) и другие конструкции.
-
Построение AST (Abstract Syntax Tree) — создается структура, представляющая синтаксическую модель шаблона.
-
Разрешение связей данных — Angular связывает выражения ({{name}}, [src]="imgUrl", (click)="do()") с экземпляром компонента.
-
Генерация инструкций (render instructions) — создаются инструкции, описывающие, как отрисовывать шаблон и обновлять DOM при изменении данных.
-
Оптимизация и компиляция — итоговый код может быть оптимизирован, преобразован в JavaScript-код и объединён с приложением.
2. Just-in-Time (JIT) компиляция
2.1 Что это
JIT-компиляция — это компиляция шаблонов непосредственно в браузере, во время загрузки приложения.
2.2 Особенности
-
Компиляция происходит в рантайме.
-
Используется в режиме разработки (по умолчанию ng serve).
-
Компилятор @angular/compiler включён в бандл.
-
Из-за включенного компилятора размер JS-файлов больше.
-
Время запуска приложения выше, так как шаблоны компилируются при загрузке.
2.3 Преимущества
-
Быстрая разработка и отладка.
-
Нет необходимости пересобирать проект при каждом изменении шаблона.
2.4 Недостатки
-
Больше размер бандлов.
-
Меньшая производительность на старте (дольше загружается).
-
Отсутствие предварительной валидации шаблонов на этапе сборки.
3. Ahead-of-Time (AOT) компиляция
3.1 Что это
AOT-компиляция преобразует шаблоны и компоненты в JavaScript-код на этапе сборки, до того как приложение будет загружено в браузер.
3.2 Особенности
-
Используется в production-сборках (ng build --prod или ng build --configuration production).
-
@angular/compiler исключается из финального бандла.
-
Шаблоны проверяются и компилируются заранее.
-
Производительность выше.
3.3 Преимущества
-
Быстрый старт приложения — шаблоны уже скомпилированы.
-
Меньше размер бандлов — компилятор не загружается в браузер.
-
Раннее обнаружение ошибок — компиляция проверяет шаблоны, типы, ошибки биндингов на этапе сборки.
-
Улучшенная безопасность — исключается возможность выполнения произвольного кода через шаблон.
3.4 Недостатки
-
Более сложная сборка (включает Angular Compiler).
-
Нужно пересобирать приложение при любом изменении шаблона.
4. Пример различий JIT vs AOT
Шаблон:
<p>{{ user.name }}</p>
JIT:
-
При загрузке Angular компилирует {{ user.name }} в вызов функции чтения component.user.name.
-
Браузер выполняет интерпретацию шаблона.
AOT:
- При сборке Angular создаёт JavaScript-функцию:
ɵɵtextInterpolate1(" ", ctx.user.name, " ");
Эта функция компилируется один раз и включается в финальный код.
5. Как выбрать режим
-
Для разработки (ng serve): по умолчанию JIT.
-
Для продакшена: использовать --configuration production, включающий AOT.
ng build --configuration production
Можно явно указать флаг:
ng build --aot
6. Angular Ivy и его влияние
С Ivy (начиная с Angular 9), оба режима компиляции были улучшены:
-
AOT компиляция стала быстрее и надёжнее.
-
JIT компиляция получила улучшения производительности.
-
Появился partial compilation — модульная компиляция компонентов.
Ivy также упрощает внедрение сторонних библиотек: можно использовать AOT и JIT одновременно, т.к. каждая часть компилируется отдельно.
7. Как определить, какой режим используется
- Включить в angular.json:
"configurations": {
"production": {
"aot": true
}
}
- Или в tsconfig.app.json:
"angularCompilerOptions": {
"enableIvy": true,
"strictTemplates": true
}
- Проверить размер бандла — с AOT он меньше.
8. Диагностика шаблонов
AOT помогает находить:
-
Ошибки в синтаксисе шаблона.
-
Несуществующие свойства ({{ data.notFound }}).
-
Нарушения типов ([someInput]="string" когда нужен boolean).
9. Использование precompiled factories
С AOT Angular генерирует .ngfactory.ts файлы — они содержат оптимизированный код, исполняющий шаблоны без дополнительных компиляторов в рантайме.
10. Совместимость библиотек
Для AOT-билда все сторонние библиотеки должны быть предварительно AOT-совместимыми, т.е. компилироваться с помощью Angular Compiler (ng-packagr, ngc, Ivy-compatible build).
Таким образом, Angular предлагает гибкую архитектуру компиляции шаблонов:
-
JIT — для разработки;
-
AOT — для производительных production-сборок;
Оба режима обеспечивают совместимость и одинаковое поведение в приложении, но AOT даёт более быстрый рендеринг и безопасную валидацию шаблонов до загрузки в браузер.