Angular — компиляция AOT и JIT

внешний интерфейс переводчик JavaScript Angular.js

Обзор

хорошо известно,angularПрежде чем приложение может быть выполнено,angularКомпоненты и шаблоны в приложении должны быть преобразованы в распознаваемые браузеромjavascriptкод, и это преобразование выполняется черезangualrвыполняется собственным компилятором.

Angular предоставляет два метода компиляции, а именноAOT(предварительно скомпилированный) иJIT(даже если скомпилировано), гдеJITдля метода компиляции по умолчанию

АОТ этоAhead of time, относится к компиляции во время сборки, то есть компиляция завершается на стороне сервера. JЭтоJust-in-Time, компилирует приложение во время выполнения, то есть при загрузке приложения.

AOT vs JIT

На самом деле компилятор всего один, разница между ними только во времени и инструментах компиляции

JIT-компиляция приводит к снижению производительности во время выполнения. Из-за этого процесса компиляции в браузере отображение представления занимает больше времени. Так как приложение содержит компилятор Angular и много библиотечного кода, который на самом деле не нужен, размер файла также будет больше. Большие приложения загружаются дольше и загружаются медленнее.

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

Предварительно скомпилированный (AOT) компилируется во время сборки, что позволяет своевременно обнаруживать ошибки шаблона и повышать производительность приложения.

Процесс режима компиляции #JiT

типичныйjiTПроцесс разработки приложения примерно такой:

  • использоватьTypeScriptРазрабатывать Angular-приложения
  • использоватьtscдля компиляции ts-кода этого приложения
  • Пакет
  • компрессия
  • развертывать

Когда приложение развернуто и пользователь открывает его в браузере, происходит следующее:

  • Браузер скачать js код
  • Angularзапускать
  • AngularНачните в своем браузереJiTПроцесс компиляции, такой как создание кода js каждого компонента в приложении.
  • Страница приложения отображается

Вместо этого используйтеAoTПроцесс разработки аппликации шаблона таков:

  • использоватьTypeScriptразвиватьAngularзаявление
  • использоватьngcскомпилировать приложение
    • использоватьAngularКомпилятор компилирует шаблон и генерируетTypeScriptкод
    • TypesScriptКод компилируется вJavaScriptкод
  • Пакет
  • компрессия
  • развертывать

Хотя предыдущий процесс немного сложнее, со стороны пользователя все становится проще:

  • Скачать все коды
  • Angularзапускать
  • Страница приложения отображается

В итоге,AngularсерединаJitа такжеAoTОсновные отличия:

  • Когда происходит процесс компиляции
  • JiTгенерируетсяJSкод, покаAoTгенерируетсяTSкод. Это в основном потому, чтоJiTделается в браузере, совершенно необязательно генерироватьTSкод, но непосредственно произведенныйJSкод.

Углубленная компиляция AOT

Скомпилированная конфигурация AOT

Установитьnpmполагаться

npm install @angular/compiler-cli @angular/platform-server --save

Добавьте следующие удобные сценарии npm в package.json, чтобы компиляцию можно было выполнить с помощью одной команды.

"build:aot": "ngc -p tsconfig-aot.json

использовать@angular/compiler-cliпредоставляется в упаковкеngcвместо этого компиляторTypeScriptКомпилятор (ТСЦ).

настроитьtsconfig-aot.jsonдокумент

просто поставьtsconfig.jsonСкопируйте файл и измените его

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 }
}

compilerOptionsЧасть изменяет только одно свойство: ** установить модуль вes2015(Подготовьтесь к последующей оптимизации встряхивания дерева)

ngcРеальные дополнения к площади находятся внизуangularCompilerOptions. этоgenDirАтрибут указывает компилятору сохранить результаты компиляции в новомaotПод содержанием

"skipMetadataEmit" : trueЭто свойство не позволяет компилятору создавать файлы метаданных для скомпилированного приложения. Метаданные не требуются при экспорте в файлы TypeScript, поэтому их не нужно включать.

Начать компиляцию AOT:

node_modules/.bin/ngc -p tsconfig-aot.json

После завершения компиляции кучаNgFactoryфайл, не редактируйте эти NgFactory! Эти файлы заменяются при перекомпиляции.

Измените способ руководстваmain.tsдокумент

отplatformBrowserDynamic.bootstrapизменить на использованиеplatformBrowser().bootstrapModuleFactoryи положиAppModuleNgFactoryЕму передается результат компиляции AOT.

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Сотрясение дерева

Оптимизация встряхивания дерева относится к отслеживаниюimportа такжеexportоператор для статического анализа приложения, обхода графа зависимостей и удаления неиспользуемого кода. Путем удаления неиспользуемой части исходного кода и библиотечного кода оптимизация сотрясения дерева может значительно уменьшить размер загружаемого приложения.

Оптимизация встряхивания дерева может быть использована в нашем финальномBundleУдалите код, который не используется в нашем приложении. Это один из наиболее эффективных способов уменьшения размера приложения.

В настоящее время webpack2 уже поддерживаетtree shaking, официальный сайт описываетИспользование Rollup в angular

Введение в тряску деревьев на Чжиху

Разработчики используют JIT, производство использует AOT

В настоящее время компиляция AOT и оптимизация встряхивания дерева занимают слишком много времени для разработки. Это изменится в будущем. В настоящее время рекомендуется использовать компиляцию JIT в разработчике, а затем переключиться на компиляцию AOT перед выпуском в производство.

Категории