Angular — Что такое AOT и JIT-компиляция и как это работает?
Angular — популярный веб-фреймворк с открытым исходным кодом, используемый для создания современных, динамичных и масштабируемых веб-приложений. При разработке приложения Angular доступны два основных режима компиляции: компиляция с опережением времени (AOT) и компиляция Just-in-Time (JIT). В этой статье мы подробно рассмотрим различия между этими двумя режимами и то, как они работают.
Компиляция «точно в срок» (JIT)
Компиляция JIT — это режим компиляции по умолчанию в Angular, и это процесс, с помощью которого компилятор Angular компилирует шаблоны и компоненты приложения во время выполнения. Это означает, что каждый раз, когда приложение загружается в браузер, компилятор Angular запускается и компилирует шаблоны и компоненты. JIT-компиляция подходит для сред разработки, поскольку позволяет разработчикам вносить изменения в свое приложение и сразу же видеть изменения без необходимости перекомпилировать все приложение.
Когда приложение загружается, JIT-компилятор анализирует шаблоны приложения и динамически создает необходимые компоненты и директивы. Он компилирует шаблоны в код JavaScript, который может выполняться браузером. Компилятор JIT отвечает за синтаксический анализ кода HTML и TypeScript приложения, создание кода JavaScript и его оптимизацию для повышения производительности. Этот процесс может замедлить время запуска приложения и увеличить его общий размер.
Опережающая компиляция (AOT)
Компиляция AOT — это режим компиляции, в котором компилятор Angular компилирует шаблоны и компоненты приложения в процессе сборки, прежде чем приложение будет развернуто в производственной среде. Это означает, что скомпилированный код готов для выполнения браузером без необходимости компилировать шаблоны и компоненты во время выполнения.
Компиляция AOT предлагает несколько преимуществ по сравнению с компиляцией JIT, в том числе:
- Более быстрое время запуска: поскольку шаблоны и компоненты приложения уже скомпилированы, приложение запускается быстрее.
- Меньший размер пакета: компиляция AOT удаляет компилятор Angular и другой ненужный код из производственного пакета, что приводит к уменьшению размера пакета.
- Улучшенная безопасность: компиляция AOT устраняет риск инъекций путем удаления динамической генерации кода.
Чтобы использовать компиляцию AOT в приложении Angular, вам нужно выполнить следующую команду:
ng build --aot
Эта команда компилирует приложение в режиме компиляции AOT и создает производственный пакет, готовый к развертыванию в рабочей среде.
Как работает компиляция AOT
Компиляция AOT включает два шага: анализ шаблона и генерация кода.
Разбор шаблона
В режиме компиляции AOT компилятор Angular анализирует шаблоны и создает файл TypeScript, определяющий структуру шаблона. Этот файл содержит информацию о компонентах, директивах и каналах, используемых в шаблоне. Компилятор также создает файл метаданных, содержащий информацию о модуле, компонентах, директивах и каналах, используемых в приложении.
Генерация кода
На втором этапе компилятор Angular генерирует код, который может быть выполнен браузером. Компилятор считывает файл метаданных и генерирует код, необходимый для создания компонентов, директив и каналов, определенных в шаблоне. Сгенерированный код оптимизирован для повышения производительности и намного меньше кода, сгенерированного JIT-компилятором.
Пример компиляции AOT
Давайте рассмотрим простой пример, чтобы понять, как работает компиляция AOT.
Предположим, у нас есть следующий компонент Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: `
<h1>Hello {{ name }}!</h1>
`,
})
export class HelloComponent {
name = 'Angular';
}
В режиме JIT-компиляции компилятор Angular будет запускаться во время выполнения и компилировать шаблон HelloComponent каждый раз при визуализации компонента. Однако в режиме компиляции AOT компилятор Angular компилирует шаблон в процессе сборки и генерирует следующий код:
import { Component } from '@angular/core';
function HelloComponent_ng_template_0(_l: any, _ctx: any) {
if (_l === 0) { // creation mode
const _t = _ctx._l();
_l(_t);
const _e = _t.nativeElement;
_l(_e, 0, 0);
_l(_e.childNodes[0], 1);
_l(_e, 0, 0);
}
if (_l === 1) { // update mode
const _e = _ctx._el();
_l(_e.childNodes[0], 1, _l(_ctx.name));
}
}
@Component({
selector: 'app-hello',
template: `
<h1>Hello {{ name }}!</h1>
`,
})
export class HelloComponent {
name = 'Angular';
_l() { return this._el().parentView; }
_el() { return this._view.elementRefs[0]; }
_view: any;
}
Как видите, код, скомпилированный с помощью AOT, намного меньше и эффективнее, чем код, скомпилированный JIT. Код, скомпилированный с помощью AOT, содержит функцию с именем HelloComponent_ng_template_0, представляющую скомпилированный шаблон. Функция принимает два параметра: _l и _ctx. _l представляет режим создания или обновления, а _ctx представляет контекст шаблона.
В функции HelloComponent_ng_template_0 режим создания инициализирует шаблон компонента, а режим обновления обновляет шаблон компонента всякий раз, когда происходит изменение. Функция также содержит ссылку на свойство name, которое используется для динамического отображения имени компонента в шаблоне.
Заключение
В заключение, оба режима компиляции AOT и JIT имеют свои преимущества и недостатки. JIT-компиляция подходит для сред разработки, поскольку позволяет разработчикам вносить изменения в свои приложения и сразу же видеть изменения без необходимости перекомпилировать все приложение. Компиляция AOT, с другой стороны, подходит для производственных сред, поскольку обеспечивает более быстрое время запуска, меньшие размеры пакетов и лучшую безопасность.
При выборе между компиляцией AOT и JIT учитывайте требования вашего приложения и среду, в которой оно будет развернуто. Если вы разрабатываете небольшое приложение или прототип, JIT-компиляции может быть достаточно. Однако, если вы создаете крупномасштабное производственное приложение, лучшим выбором будет компиляция AOT.
Стоит отметить, что для компиляции AOT требуется больше настроек и настроек, чем для JIT-компиляции. Вам необходимо настроить процесс сборки для использования компиляции AOT и убедиться, что все зависимости установлены правильно. Однако, как только вы настроите компиляцию AOT, вы получите более быстрое время сборки и более оптимизированное приложение.
В целом, понимание различий между режимами компиляции AOT и JIT в Angular имеет решающее значение для создания эффективных, масштабируемых и безопасных веб-приложений.
Спасибо, что прочитали!
Я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне стать лучше.
Не забудь подписаться⭐️
Страница Facebook: https://www.facebook.com/designTechWorld1
Страница в Instagram: https://www.instagram.com/techd.esign/
Канал YouTube: https://www.youtube.com/@tech..Design/
Твиттер: https://twitter.com/sumit_singh2311
Используемое оборудование:
Ноутбук: https://amzn.to/3yKkzaC
Смотрите:https://amzn.to/41cialm
Вы можете предпочесть React Book: https://amzn.to/3Tw29nx
Некоторые дополнительные книги, связанные с языками программирования:
- Важный отказ от ответственности — «Amazon и логотип Amazon являются товарными знаками Amazon.com, Inc. или ее дочерних компаний».
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
