Я ссылался на эту документацию и натолкнулся на концепцию компиляции. Можно использовать компиляцию JIT или AOT. Тем не менее, я нашел его очень кратким, и мне нужно подробно знать следующие моменты:
- Различия между этими двумя методами
- Рекомендации о том, когда что использовать
angular
compilation
Гауранг Патель
источник
источник
ng buildХотя есть некоторые ответы, но я хотел бы также добавить некоторые из своих выводов, потому что я действительно был сбит с толку тем, что на самом деле компилируется, поскольку во всех случаях происходит преобразование
TS->JS. Я беру несколько параграфов из блога Джеффа в качестве ссылки.JIT
TSКод , написанный разработчиком компилируется вJSкод. Теперь этот скомпилированныйjsкод снова компилируется браузером, чтобы егоhtmlможно было отображать динамически в соответствии с действием пользователя, и, соответственно, коды дляangular(для компонентов, обнаружения изменений, внедрения зависимостей) также генерируются во время выполнения.(Компилятор браузера - это то, что принимает директивы и компоненты приложения, а также соответствующие им HTML и CSS, и создает фабрики компонентов для быстрого удаления экземпляров со всей их логикой создания представления.)
АОТ
TSКод , написанный разработчиком компилируется вJSкод, этоjsуже скомпилированные для угловых и . Теперь этот скомпилированныйjsкод снова компилируется браузером, чтобыhtmlможно было отобразить. Но загвоздка здесь в том, что о функцияхangularуже позаботилсяAOTкомпилятор, и, следовательно, браузеру не нужно сильно беспокоиться о создании компонентов, обнаружении изменений и внедрении зависимостей. Итак, имеем:При использовании AOT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог немедленно отобразить приложение, не дожидаясь предварительной компиляции приложения.
Компилятор встраивает внешние шаблоны HTML и таблицы стилей CSS в JavaScript приложения, устраняя отдельные запросы ajax для этих исходных файлов.
Нет необходимости скачивать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения.
Компилятор AOT обнаруживает и сообщает об ошибках привязки шаблона на этапе сборки, прежде чем пользователи смогут их увидеть.
AOT компилирует HTML-шаблоны и компоненты в файлы JavaScript задолго до их предоставления клиенту. Без шаблонов для чтения и без рискованной оценки HTML или JavaScript на стороне клиента меньше возможностей для атак путем внедрения.
Остальные различия уже охвачены списком Беньямина, Нисара и Гауранга.
Не стесняйтесь поправлять меня
источник
Беньямин и Нисар упомянули здесь несколько хороших моментов. Я добавлю к этому.
Хотя теоретически AOT выглядит более привлекательным вариантом, чем JIT для производственных целей, но я сомневался, стоит ли оно того!
Что ж, я нашел хорошую статистику Джеффа Кросса, и она действительно доказывает, что AOT значительно сокращает время начальной загрузки приложения. Ниже приведен снимок из сообщения Джеффа Кросса, который даст вам быстрое представление об этом,
источник
JiT (как раз вовремя), подборка
Само название описывает работу, код компилируется как раз в момент загрузки страницы в браузере. Браузер загрузит компилятор, построит код приложения и отобразит его.
Это будет хорошо для среды разработки.
Компиляция AoT (опережая время)
Он компилирует весь код во время сборки приложения. Таким образом, браузер не хочет загружать компилятор и компилировать код. В этом методе браузер может легко отобразить приложение, просто загрузив уже скомпилированный код.
Может использоваться в производственной среде
Мы можем сравнить компиляцию JiT и AoT, как показано ниже
источник
JIT (своевременная компиляция)
Just-in-Time (JIT) - это тип компиляции, при которой ваше приложение компилируется в браузере во время выполнения.
AOT (предварительная компиляция)
Опережая время (AOT) - это тип компиляции, при которой ваше приложение компилируется во время сборки.
источник
В конце дня AOT (Ahead-of-Time) и JIT (Just-in-Time) делают то же самое. Они оба компилируют ваш код Angular, чтобы он мог работать в нативной среде (например, в браузере). Ключевое различие в том, когда происходит компиляция. С AOT ваш код компилируется до загрузки приложения в браузере. С JIT ваш код компилируется во время выполнения в браузере.
Вот сравнение:
Преимущества AOT:
источник
Фактически существует только один компилятор Angular. Разница между AOT и JIT заключается во времени и инструментах. При использовании AOT компилятор запускается один раз во время сборки с использованием одного набора библиотек; с JIT он запускается каждый раз для каждого пользователя во время выполнения с использованием другого набора библиотек.
источник
JIT-компилятор, который мы используем при разработке проекта angular. В этой компиляции (преобразование TS в JS) происходит во время выполнения приложения. В то время как AOT используется во время создания кода приложения для развертывания приложения в производственной среде, в этот раз мы создаем код нашего приложения с помощью команды ng build --prod, которая создает папку с именем webpack, webpack содержит связку всех файлов (HTML , CSS и машинописный текст) в сжатом формате javascript.
Размер папки webpack, созданной для производства, намного меньше, чем папка, созданная для среды разработки (с помощью команды ... ng build), потому что она не содержит компилятор внутри папки webpack, это улучшает производительность приложения .
источник