Компиляция Just-in-Time (JiT) и Ahead-of-Time (AoT) в Angular


112

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

  • Различия между этими двумя методами
  • Рекомендации о том, когда что использовать

Ответы:


149

JIT - компилируйте TypeScript как раз вовремя для его выполнения.

  • Скомпилировано в браузере.
  • Каждый файл компилируется отдельно.
  • Нет необходимости создавать после изменения кода и перед перезагрузкой страницы браузера.
  • Подходит для местной застройки.

AOT - компилируйте TypeScript на этапе сборки.

  • Скомпилировано самой машиной через командную строку (Faster).
  • Весь код скомпилирован вместе, включая HTML / CSS в скрипты.
  • Нет необходимости развертывать компилятор (половина размера Angular).
  • Более безопасный, первоисточник не разглашается.
  • Подходит для производственных сборок.

2
Кроме того, у меня была очень низкая производительность при использовании своевременной компиляции, особенно на старых устройствах Android. Кроме того, разрыв рендеринга при загрузке первой страницы намного больше (на старых устройствах Android до 10 секунд в зависимости от размера вашего проекта).
Феликс Хагшпиль

29
Машинопись не компилируется вовремя, браузер не может этого сделать. В обоих случаях машинописный текст компилируется в процессе сборки.
Robouste

2
@Robouste: Это именно то, что меня смущает .. Что действительно скомпилировано заранее и точно в срок .. (если TJS компилируется сразу). Когда я запрашиваю страницу в проводнике, javascript будет загружен и выполнен в браузере. Нужно ли, чтобы какой-либо из typedJs приходил в браузер ??? нет, совсем нет ... Так что же компилируется заранее и точно в срок .. ?? На самом деле имеется в виду компилятор angular. эта ссылка ответит на все вопросы: " angular.io/guide/aot-compiler "
Ассиль 02

2
Я не эксперт, но при использовании JIT исходники Angular отправляются в браузер, и он скомпилирует приложение. Это позволяет вам иметь динамический материал, который необходимо компилировать во время выполнения. В AOT все предварительно скомпилировано, поэтому сервер отправляет общий веб-сайт javascript. Вы получаете скорость выполнения и меньшее время загрузки.
Робуст

1
@LucasFowler Ваш браузер будет компилировать Javascript, а не Typescript. Вот почему вам все еще нужен ng build
конвертер

63

Хотя есть некоторые ответы, но я хотел бы также добавить некоторые из своих выводов, потому что я действительно был сбит с толку тем, что на самом деле компилируется, поскольку во всех случаях происходит преобразование TS-> JS. Я беру несколько параграфов из блога Джеффа в качестве ссылки.

JIT

TSКод , написанный разработчиком компилируется в JSкод. Теперь этот скомпилированный jsкод снова компилируется браузером, чтобы его htmlможно было отображать динамически в соответствии с действием пользователя, и, соответственно, коды для angular (для компонентов, обнаружения изменений, внедрения зависимостей) также генерируются во время выполнения.

(Компилятор браузера - это то, что принимает директивы и компоненты приложения, а также соответствующие им HTML и CSS, и создает фабрики компонентов для быстрого удаления экземпляров со всей их логикой создания представления.)

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

АОТ

TSКод , написанный разработчиком компилируется в JSкод, это js уже скомпилированные для угловых и . Теперь этот скомпилированный js код снова компилируется браузером, чтобы htmlможно было отобразить. Но загвоздка здесь в том, что о функциях angularуже позаботился AOTкомпилятор, и, следовательно, браузеру не нужно сильно беспокоиться о создании компонентов, обнаружении изменений и внедрении зависимостей. Итак, имеем:

Более быстрый рендеринг

При использовании AOT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог немедленно отобразить приложение, не дожидаясь предварительной компиляции приложения.

Меньше асинхронных запросов

Компилятор встраивает внешние шаблоны HTML и таблицы стилей CSS в JavaScript приложения, устраняя отдельные запросы ajax для этих исходных файлов.

Меньший размер загружаемого фреймворка Angular

Нет необходимости скачивать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения.

Обнаруживать ошибки шаблона раньше

Компилятор AOT обнаруживает и сообщает об ошибках привязки шаблона на этапе сборки, прежде чем пользователи смогут их увидеть.

Лучшая безопасность

AOT компилирует HTML-шаблоны и компоненты в файлы JavaScript задолго до их предоставления клиенту. Без шаблонов для чтения и без рискованной оценки HTML или JavaScript на стороне клиента меньше возможностей для атак путем внедрения.


Остальные различия уже охвачены списком Беньямина, Нисара и Гауранга.

Не стесняйтесь поправлять меня


5
Спасибо. Я наконец понял после прочтения вашего ответа и прочитал много из них.
Марио Суботич

24

Беньямин и Нисар упомянули здесь несколько хороших моментов. Я добавлю к этому.

Хотя теоретически AOT выглядит более привлекательным вариантом, чем JIT для производственных целей, но я сомневался, стоит ли оно того!

Что ж, я нашел хорошую статистику Джеффа Кросса, и она действительно доказывает, что AOT значительно сокращает время начальной загрузки приложения. Ниже приведен снимок из сообщения Джеффа Кросса, который даст вам быстрое представление об этом,

введите описание изображения здесь


19

JiT (как раз вовремя), подборка

Само название описывает работу, код компилируется как раз в момент загрузки страницы в браузере. Браузер загрузит компилятор, построит код приложения и отобразит его.

Это будет хорошо для среды разработки.

Компиляция AoT (опережая время)

Он компилирует весь код во время сборки приложения. Таким образом, браузер не хочет загружать компилятор и компилировать код. В этом методе браузер может легко отобразить приложение, просто загрузив уже скомпилированный код.

Может использоваться в производственной среде

Мы можем сравнить компиляцию JiT и AoT, как показано ниже

введите описание изображения здесь


1
Означает ли это, что приложение JiT будет загружаться быстрее в первый раз, но после этого приложение AoT всегда будет загружаться быстрее?
JKL

Никогда. JiT загружается медленнее, чем AoT
vivekkurien

AOT медленнее, чем JIT, потому что он не соответствует требованиям во время выполнения. вам нужно изменить названия jit и aot
Mr.AF

18

JIT (своевременная компиляция)

Just-in-Time (JIT) - это тип компиляции, при которой ваше приложение компилируется в браузере во время выполнения.

ng build
ng serve

введите описание изображения здесь

AOT (предварительная компиляция)

Опережая время (AOT) - это тип компиляции, при которой ваше приложение компилируется во время сборки.

ng build --aot
ng serve --aot

введите описание изображения здесь


2
какая разница между этими 2 цифрами? разве не нужно интро?
Mr.AF

Таким образом, Ahead-of-Time больше похож на Ahead-of-Runtime.
Алиреза Кахаи,

@ Mr.AF только что заметил, что теперь изображения такие же.
Tiago Martins Peres 李大仁,

Изображения похожи, но разные. На втором изображении компиляция происходит во время сборки, что обозначено вертикальной линией, разделяющей этапы сборки и выполнения.
Mwiza

14

В конце дня AOT (Ahead-of-Time) и JIT (Just-in-Time) делают то же самое. Они оба компилируют ваш код Angular, чтобы он мог работать в нативной среде (например, в браузере). Ключевое различие в том, когда происходит компиляция. С AOT ваш код компилируется до загрузки приложения в браузере. С JIT ваш код компилируется во время выполнения в браузере.

Вот сравнение: введите описание изображения здесь

Преимущества AOT:

  • Более быстрый запуск, так как анализ и компиляция не выполняются в браузере.
  • Шаблоны проверяются во время разработки (что означает, что все ошибки, которые мы видим в консоли javascript в запущенных приложениях, в противном случае будут выброшены в наш процесс сборки).
  • Меньший размер файла из- за неиспользуемых функций может быть удален, а сам компилятор не поставляется.

4

Фактически существует только один компилятор Angular. Разница между AOT и JIT заключается во времени и инструментах. При использовании AOT компилятор запускается один раз во время сборки с использованием одного набора библиотек; с JIT он запускается каждый раз для каждого пользователя во время выполнения с использованием другого набора библиотек.


2

JIT-компилятор, который мы используем при разработке проекта angular. В этой компиляции (преобразование TS в JS) происходит во время выполнения приложения. В то время как AOT используется во время создания кода приложения для развертывания приложения в производственной среде, в этот раз мы создаем код нашего приложения с помощью команды ng build --prod, которая создает папку с именем webpack, webpack содержит связку всех файлов (HTML , CSS и машинописный текст) в сжатом формате javascript.

Размер папки webpack, созданной для производства, намного меньше, чем папка, созданная для среды разработки (с помощью команды ... ng build), потому что она не содержит компилятор внутри папки webpack, это улучшает производительность приложения .

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.