AOT

Каждое приложение Angular требует компиляции до того, как оно запускается в браузере: компоненты и шаблоны Angular не могут быть запушены браузером напрямую. Во время компиляции компилятор Angular также улучшает производительность выполнения приложения.

Компилятор «из коробки» в AngularJS и Angular называется JiT (Just-in-Time) компилятором. Что касается AoT, то это означает компилятор Ahead-of-Time, который был недавно представлен в Angular. По сравнению с компиляцией JiT, которая выполнятся в браузере, AoT предоставляет меньший bundle с более быстрым рендерингом в браузере.

Зачем собирать в режиме AoT?:

• быстрее рендеринг – c помощью AoT браузер загружает предварительно скомпилированную версию приложения.
• меньшее количество асинхронных запросов – компилятор встраивает внешние html-шаблоны и таблицы стилей css в приложение, устраняя отдельные запросы ajax для этих исходных файлов.
• размер загружаемого файла меньшего – нет необходимости загружать компилятор, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его пропуск значительно снижает полезную нагрузку приложения.
• обнаружение ошибок шаблона – компилятор AoT обнаруживает и сообщает об ошибках шаблона во время этапа сборки, прежде чем пользователи смогут их увидеть.
• улучшенная безопасность – AoT компилирует html-шаблоны и компоненты в файлы javascript задолго до того, как они будут отправлены клиенту, что уменьшает возможности для инъекционных атак.

Однако AoT не совершенен. Основное ограничение заключается в том, что AoT, из-за того, как он компилирует исходный код, нельзя использовать с общепринятыми практиками, например, экспорт по умолчанию из модулей, литералы шаблонов и функции в провайдерах, роутерах или declarations.

Другая проблема с AoT заключается в том, что когда приложение достигает определенной сложности, пакет AoT по сравнению с JiT bundle фактически может занимать больше места. Как компромисс ради простой логики для браузера (поэтому и большая скорость рендеринга), код, сгенерированный AoT, на самом деле более многословный по сравнению с «динамическим» JiT.

AoT конфигурация

В angular2-webpack-starter уже все настроено. Нужно только запустить командой npm run build:aot. Но мы рассмотрим механизм более детально.

Во-первых, скачайте ngc-webpack из npm и сохраните его как зависимость разработки:

npm install -D ngc-webpack

Затем в файле конфигурации webpack добавляем:

plugins: [
   ...
   new ngcWebpack.NgcWebpackPlugin({
       disabled: !AOT,
       tsConfig: helpers.root('tsconfig.webpack.json'),
       resourceOverride: helpers.root('config/resource-override.js')
   })
]