Я ссылался на эту документацию и натолкнулся на концепцию компиляции. Можно использовать компиляцию JIT или AOT. Тем не менее, я нашел его очень кратким, и мне нужно подробно знать следующие моменты:
Ответы:
JIT - компилируйте TypeScript как раз вовремя для его выполнения.
AOT - компилируйте TypeScript на этапе сборки.
ng build
Хотя есть некоторые ответы, но я хотел бы также добавить некоторые из своих выводов, потому что я действительно был сбит с толку тем, что на самом деле компилируется, поскольку во всех случаях происходит преобразование TS-> JS. Я беру несколько параграфов из блога Джеффа в качестве ссылки.
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 на стороне клиента меньше возможностей для атак путем внедрения.
Остальные различия уже охвачены списком Беньямина, Нисара и Гауранга.
Не стесняйтесь поправлять меня
Беньямин и Нисар упомянули здесь несколько хороших моментов. Я добавлю к этому.
Хотя теоретически AOT выглядит более привлекательным вариантом, чем JIT для производственных целей, но я сомневался, стоит ли оно того!
Что ж, я нашел хорошую статистику Джеффа Кросса, и она действительно доказывает, что AOT значительно сокращает время начальной загрузки приложения. Ниже приведен снимок из сообщения Джеффа Кросса, который даст вам быстрое представление об этом,
JiT (как раз вовремя), подборка
Само название описывает работу, код компилируется как раз в момент загрузки страницы в браузере. Браузер загрузит компилятор, построит код приложения и отобразит его.
Это будет хорошо для среды разработки.
Компиляция AoT (опережая время)
Он компилирует весь код во время сборки приложения. Таким образом, браузер не хочет загружать компилятор и компилировать код. В этом методе браузер может легко отобразить приложение, просто загрузив уже скомпилированный код.
Может использоваться в производственной среде
Мы можем сравнить компиляцию JiT и AoT, как показано ниже
JIT (своевременная компиляция)
Just-in-Time (JIT) - это тип компиляции, при которой ваше приложение компилируется в браузере во время выполнения.
ng build
ng serve
AOT (предварительная компиляция)
Опережая время (AOT) - это тип компиляции, при которой ваше приложение компилируется во время сборки.
ng build --aot
ng serve --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, это улучшает производительность приложения .