Angular 2: сборка "точно в срок" (JiT) и "опережая время" (AoT)
Я имел в виду эту документацию и наткнулся на концепцию компиляции. Можно использовать компиляцию JIT или AOT. Тем не менее, я нашел это очень кратким и нужно знать следующие моменты в деталях,
- Различия между этими двумя методами
- Рекомендация о том, когда использовать что
7 ответов
JIT - Компиляция TypeScript как раз вовремя для его выполнения.
- Скомпилировано в браузере.
- Каждый файл составлен отдельно.
- Не нужно строить после изменения кода и перед перезагрузкой страницы браузера.
- Подходит для местного развития.
AOT - Компилировать TypeScript на этапе сборки.
- Скомпилировано самой машиной через командную строку (Faster).
- Весь код собран вместе, встраивая HTML/CSS в скрипты.
- Нет необходимости развертывать компилятор (половина углового размера).
- Более безопасный, первоисточник не разглашается.
- Подходит для производственных сборок.
Хотя есть некоторые ответы, но я хотел бы добавить некоторые из моих выводов, потому что я был действительно смущен тем, что на самом деле компилируется, как во всех случаях, 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, поэтому его пропуск значительно снижает полезную нагрузку приложения.
Обнаружение ошибок шаблона ранее
Компилятор AOT обнаруживает и сообщает об ошибках привязки шаблона на этапе сборки, прежде чем пользователи смогут их увидеть.
Лучшая безопасность
AOT компилирует HTML-шаблоны и компоненты в файлы JavaScript задолго до того, как они будут переданы клиенту. Отсутствие шаблонов для чтения и рискованная оценка HTML или JavaScript на стороне клиента дает меньше возможностей для инъекционных атак.
Остальные различия уже описаны в пунктах "Беньямин", "Нисар и Гауранг".
Не стесняйтесь поправлять меня
Беньямин и Нисар отметили здесь несколько хороших моментов. Я добавлю к этому.
Хотя теоретически AOT выглядит более привлекательным вариантом, чем JIT, для производственных целей, я сомневался, действительно ли AOT того стоит!
Ну, я нашел хорошую статистику Джеффа Кросса, и она доказывает, что AOT значительно сокращает время загрузки приложения. Ниже приведенный снимок из поста Джеффа Кросса даст вам быстрое представление об этом,
JiT (как раз вовремя) сборник
Само имя описывает работу, оно компилирует код как раз во время загрузки страницы в браузере. Браузер загрузит компилятор, соберет код приложения и отобразит его.
Это будет хорошо для среды разработки.
AoT (опережает время) сборник
Он компилирует весь код во время сборки приложения. Поэтому браузер не хочет загружать компилятор и компилировать код. В этом методе браузер может легко визуализировать приложение, просто загрузив уже скомпилированный код.
Может использоваться в производственной среде
Мы можем сравнить компиляцию JiT и AoT, как показано ниже
В конце дня AOT(опережая время) и JIT(точно вовремя) делают одно и то же. Они оба компилируют ваш Angular-код, чтобы он мог работать в собственной среде (то есть в браузере). Основное различие заключается в том, когда происходит компиляция. С помощью AOT ваш код компилируется перед загрузкой приложения в браузер. С JIT ваш код компилируется во время выполнения в браузере.
Вот сравнение: 
Преимущества AOT:
- Более быстрый запуск, так как анализ и компиляция не происходит в браузере.
- Шаблоны проверяются во время разработки (что означает, что все ошибки, которые мы видим в консоли javascript в запущенных приложениях, в противном случае будут возникать в процессе сборки).
- Меньший размер файла как неиспользуемые компоненты может быть удален, а сам компилятор не поставляется.
Нашел довольно хорошее объяснение здесь..
TLDR;
По сути, мы компилируем код дважды с помощью приложений angular2, один раз, когда мы конвертируем TS в JS, а затем, когда браузер конвертирует JS в двоичный файл.
Хотя мы не можем контролировать последнее, мы можем контролировать, когда выполняется компиляция из TS в JS.
С angular2, если вы используете JIT (который используется по умолчанию), обе компиляции происходят после загрузки кода в браузер (т. Е. TS -> JS -> двоичный файл). Это не только дополнительная нагрузка для выполнения компиляции TS -> JS на лету в браузере, но также и то, что компилятор angular2 почти вдвое меньше пакета angular2, поэтому, если этого избежать, мы можем уменьшить размер полезная нагрузка значительно.
AOT преобразует код TS в JS, сокращая время компиляции, а также размер кода, устраняя необходимость в угловом компиляторе, который составляет 50% кода
На самом деле есть только один угловой компилятор. Разница между AOT и JIT зависит от времени и инструментов. С AOT компилятор запускается один раз во время сборки, используя один набор библиотек; с JIT он запускается каждый раз для каждого пользователя во время выполнения, используя другой набор библиотек.
JIT-компилятор, который мы используем при разработке проекта angular. В этой компиляции (преобразование TS в JS) происходит во время выполнения приложения. В то время как AOT используется во время сборки кода приложения для развертывания приложения в производстве, на этот раз мы создаем код нашего приложения с помощью команды ng build --prod, которая создает папку с именем webpack, webpack содержит связку всех файлов (HTML, CSS и машинописный текст) в сжатом формате javascript.
Размер папки webpack, созданной для производства, намного меньше, чем папка, созданная для среды разработки (с помощью команды...ng build), потому что она не содержит компилятор внутри папки webpack, это улучшает производительность приложения.