Компилятор Ahead-of-Time (AOT)

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

Компилятор Angular Ahead-of-Time (AOT) преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки до того, как браузер загрузит и запустит этот код. Компиляция вашего приложения в процессе сборки обеспечивает более быструю визуализацию в браузере.

В этом руководстве объясняются концепции AOT, как указать метаданные и применить доступные параметры компилятора для эффективной компиляции ваших приложений с помощью компилятора AOT. .

Компиляция Angular

В Angular есть два способа скомпилировать ваше приложение:

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

JIT-компиляция используется по умолчанию при запуске команд интерфейса командной строки ng build (только сборка) или ng serve (сборка и обслуживание локально):

   `` ng buildng serve``  

Для компиляции AOT включите параметр —aot с командой ng build или ng serve:

  `` ng build --aotng serve --aot``  

Команда ng build с мета-флагом —prod (ng build —prod) по умолчанию компилируется с AOT.

Зачем компилировать с AOT?

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

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

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

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

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

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

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

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

  • Повышенная безопасность

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

Управление компиляцией приложения

При использовании компилятора Angular AOT вы можете управлять компиляцией приложения двумя способами:

  • Предоставляя параметры компилятора шаблона в файле tsconfig.json.
  • Указав метаданные Angular.

Указание метаданных Angular

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

Вы можете указать метаданные с помощью таких декораторов, как @Component () и @Input (), или неявно в объявления конструктора этих декорированных классов.

В следующем примере объект метаданных @Component () и конструктор класса сообщают Angular, как создать и отобразить экземпляр TypicalComponent.

  @Component ({selector: 'app-typing', template: '
Типичный компонент для {{data.name}}
')} класса экспорта TypicalComponent {@ Входные () данные: TypicalData; конструктор (private someService: SomeService) {}}

Live Demo:

Это просто фрагмент кода объяснение конкретной концепции и может не иметь вывода

См. Pen WBEWvV от w3resource (@ w3resource) на CodePen.

Компилятор Angular извлекает метаданные один раз и генерирует фабрику для TypicalComponent. Когда ему нужно создать экземпляр TypicalComponent, Angular вызывает фабрику, которая создает новый визуальный элемент, привязанный к новому экземпляру класса компонента с его внедренной зависимостью.

Angular параметры компилятора шаблона

Параметры компилятора шаблона указываются как члены объекта «angularCompilerOptions» в файле tsconfig.json. Укажите параметры компилятора шаблона вместе с параметрами, предоставленными компилятору TypeScript, как показано здесь в этом фрагменте кода примера:

  {"compilerOptions": {"experimentalDecorators": true, ..  .}, "angularCompilerOptions": {"fullTemplateTypeCheck": true, "preserveWhitespaces": true, ...}}  

Интерактивная демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

См. Pen MdvRyy от w3resource (@ w3resource) на CodePen.

Оцените статью
nanomode.ru
Добавить комментарий