Джефф Кросс - соучредитель nrwl.io, предоставляющий консультации по Angular корпоративным командам. Ранее он был техническим руководителем группы Angular Mobile в Google.

Большая часть магии Angular заключена в его компиляторе, как в Angular 1, так и в Angular 2. Компилятор - это то, что принимает директивы и компоненты приложения вместе с их соответствующими HTML и CSS, и создает фабрики компонентов для быстрого удаления экземпляров со всем их представлением. логика создания.

В Angular 1 и на протяжении большей части жизни Angular 2 был только JIT-компилятор (как раз вовремя), компилятор, который запускается в браузере. Когда приложение Angular 2 загружается в браузере, JIT-компилятор выполняет большую работу по анализу компонентов в приложении во время выполнения и генерации кода в памяти. Когда страница обновляется, вся проделанная работа отбрасывается, и JIT-компилятор выполняет ее заново.

Однажды у Тобиаса Боша и Миско Хевери возникла мысль… почему бы не сделать компиляцию в качестве этапа сборки? Спустя несколько месяцев на свет появилась компиляция AOT (опережающая время). Сначала он назывался автономный компилятор, но автономный - это довольно перегруженный термин, а AOT - хорошее дополнение к JIT.

С помощью компилятора AOT можно создавать приложения Angular, не требующие значительной части компилятора, обнаружения изменений или систем внедрения зависимостей во время выполнения. Это приводит к значительно меньшей полезной нагрузке приложения. А поскольку фабрики компонентов создаются во время сборки, Angular может пропустить компиляцию и сразу перейти к созданию представлений во время выполнения.

Таким образом, приложения могут быть меньше и требовать меньше работы. Каково реальное влияние AOT на пользователей?

Мы рассмотрим несколько приложений и измерим общее время загрузки приложения с момента начала загрузки страницы до момента завершения начальной загрузки Angular. Мы также измерим общий размер полезной нагрузки JS с AOT и без него.

Angular CLI

Давайте посмотрим на приложение, созданное с помощью Angular CLI с использованием AOT, в сравнении с тем же приложением Angular CLI, не использующим AOT. Использование Angular CLI 1.0.0-beta.22–1. Мы будем использовать простое приложение, созданное с помощью интерфейса командной строки, с той лишь разницей, что мы передадим флаг aot для одной версии, а не для другой. Передача флага --aot указывает CLI использовать предварительную компиляцию при создании приложения.

Версию приложения AOT можно найти здесь, а версию, не относящуюся к AOT, - здесь.

Полученные результаты

Приведенные ниже результаты получены в результате тестирования обеих версий приложения на webpagetest.org (отличный инструмент для повышения производительности, если вы его не использовали), тестирования на Galaxy S7 с эмуляцией Fast 3G. Я использовал User Timing API, чтобы отметить завершение начальной загрузки Angular, что автоматически записывается в результатах webpagetest.org. Вы можете просмотреть фактические результаты для AOT здесь, а для не-AOT здесь.

Общее время до начальной загрузки

Мы сосредоточимся на времени, необходимом для начальной загрузки приложения, что является хорошим показателем «времени до интерактивности» вашего приложения, поскольку приложение имеет тенденцию быть полностью интерактивным после завершения начальной загрузки Angular. При измерении общего времени от начальной загрузки страницы до момента, когда Angular завершает загрузку, разница довольно существенная.

Версия AOT нашего приложения заняла 2 602 мс для загрузки и начальной загрузки, в то время как версия JIT заняла 4804 мс. Если мы посмотрим на разбивку содержимого каждого теста, то увидим, что версия AOT имеет 101 КБ JS (gzip), а версия без AOT - 190 КБ (gzip). Другими словами, общая полезная нагрузка JS для приложения Hello World с Angular CLI на 89% больше при использовании режима JIT.

Мы видим, что простое использование AoT для самого простого приложения может уменьшить размер полезной нагрузки и значительно сократить время до интерактивности. Теперь давайте посмотрим на реальное приложение и посмотрим, как сравнивается общее время его начальной загрузки между AOT и JIT.

Code.gov

Несколько человек из команды Angular в Google и я помогали оптимизировать сайт code.gov, созданный с помощью Angular 2. В настоящее время на сайте используется JIT-компиляция, но скоро на нем будет включен AOT. Давайте проведем сравнение сайта в режиме JIT с версией с поддержкой AOT.

Результаты Webpagetest.org для AOT можно найти здесь, а JIT - здесь. При тестировании в тех же смоделированных условиях, что и в нашем предыдущем примере, сайт code.gov продемонстрировал впечатляющее сокращение общего времени начальной загрузки на 31%. Отчасти это улучшение связано с уменьшением размера полезной нагрузки JS (188 КБ gzip AOT против 274 КБ gzip JIT), но что более интересно в этом примере, так это когда мы копаем глубже и сравниваем Время обработки скрипта между AOT и JIT.

Поскольку AOT сокращает объем JS-кода, который необходимо проанализировать, а также объем работы, необходимой для рендеринга приложения, общее время скрипта сокращается более чем на 61%.

Используйте AOT сегодня

Улучшения производительности с AOT слишком значительны, чтобы их игнорировать. А с доступными сегодня инструментами есть больше причин, чем когда-либо, для перехода от JIT к AOT.

Angular CLI

Оба приложения в этой статье используют подключаемый модуль Angular Webpack, @ ngtools / webpack, который обрабатывает генерацию кода AOT и отложенную загрузку. Angular CLI автоматически использует этот плагин для приложений, созданных с помощью флага aot, поэтому, чтобы воспользоваться им, просто создайте новое приложение следующим образом:

$ npm install -g angular-cli
$ ng new hello-aot
$ cd hello-aot
$ ng build --aot --prod

(Обновление от 21.12.16, 13:19, исправленные шаги для создания и сборки Angular CLI. Спасибо, Mike Brocchi)

(Примечание: в конечном итоге AOT станет режимом по умолчанию в Angular CLI, и флаг --aot не потребуется).

Webpack

Если вы используете Webpack, установите @ ngtools / webpack, следуя инструкциям в пакете @ ngtools / webpack в npm.

Компилятор CLI

Angular также предоставляет компилятор командной строки для создания фабрик вручную. Пакет доступен на npm как @ angular / compiler-cli, а руководство по использованию этого подхода можно найти в официальных документах angular: https://angular.io/docs/ts/latest/cookbook/aot -compiler.html

В итоге

Компиляция AOT обеспечивает значительное улучшение времени загрузки за счет уменьшения количества JS, отправляемого браузеру, и выполнения основной части работы по компиляции во время сборки, а не в браузере. Использование AOT стало намного проще и продолжает упрощаться благодаря инструментам для добавления AOT в любой проект, независимо от системы сборки. Так что, если вы еще не используете AOT и заботитесь о быстрой загрузке приложения, сейчас самое время попробовать добавить его в свою сборку.

Ссылка

Все процитированные в этой статье примеры можно найти по адресу https://aot-examples.firebaseapp.com/. Посетите различные версии приложений и посмотрите график в Chrome Devtools. Результаты Webpagetest.org для каждого из приложений можно найти ниже (протестировано в Chrome на Samsung S7 с быстрым 3G):

  1. Code.gov с AOT: https://www.webpagetest.org/result/161221_BG_BCK8/
  2. Code.gov без AOT: https://www.webpagetest.org/result/161221_G7_BCK9/
  3. Бланк Angular CLI с AOT: https://www.webpagetest.org/result/161221_Y0_BCKA/
  4. Angular CLI без AOT: https://www.webpagetest.org/result/161221_FS_BCKC/

Джефф Кросс - соучредитель Nrwl - Enterprise Angular Consulting.