Как работает ivy компилятор? Какие преимущества?angular-81

Что такое Ivy?

Ivy — это новый движок рендеринга и компиляции, который стал стандартом начиная с Angular 9. Это полная переработка внутреннего устройства фреймворка, сохраняющая при этом обратную совместимость.

Как работает Ivy компилятор?

1. Локализованная компиляция

В отличие от предыдущего View Engine, который генерировал большие фабрики представлений, Ivy использует подход Incremental DOM:

// Пример сгенерированного кода Ivy
function MyComponent_Template(rf: RenderFlags, ctx: MyComponent) {
  if (rf & RenderFlags.Create) {
    elementStart(0, 'div');
    text(1);
    elementEnd();
  }
  if (rf & RenderFlags.Update) {
    textBinding(1, ctx.title);
  }
}

Ключевые особенности:

  • Генерирует минимальный код только для изменяемых частей
  • Каждый компонент компилируется изолированно
  • Нет глобальной информации о приложении при компиляции

2. Дерево зависимостей во время выполнения

Ivy строит зависимости компонентов непосредственно при рендеринге, а не во время компиляции:

  1. Компиляция шаблона → Генерация инструкций
  2. Создание представления → Интерпретация инструкций
  3. Обновление DOM → Применение изменений

3. Метаданные в компонентах

Ivy хранит всю необходимую информацию в самом компоненте:

class MyComponent {
  static ɵcmp: ɵComponentDeclaration = {
    type: MyComponent,
    selectors: [['app-my']],
    factory: () => new MyComponent(),
    template: function MyComponent_Template(rf, ctx) {...}
  };
}

Основные преимущества Ivy

1. Уменьшение размера бандла

  • До 40% уменьшение размера production-бандла
  • Устранение избыточных метаданных
  • Dead code elimination работает эффективнее

2. Улучшенная производительность

  • Более быстрый старт приложения (меньше кода для загрузки)
  • Оптимизированные проверки изменений
  • Лучшая tree-shaking

3. Новые возможности разработки

  • Компиляция AOT по умолчанию (без дополнительной настройки)
  • Ленивая загрузка компонентов без NgModule
  • Отладка шаблонов (см. ng.probe в dev tools)

4. Упрощенный API

  • Отказ от NgModule в некоторых сценариях
  • Локальные стили компонентов работают предсказуемее
  • Упрощенный DI с возможностью tree-shakeable провайдеров

Примеры новых возможностей

1. Ленивая загрузка компонентов

const HeroComponent = await import('./hero.component').then(m => m.HeroComponent);

2. Отладка в консоли

// В браузерной консоли
ng.getComponent(document.querySelector('app-root'));

3. Улучшенные сообщения об ошибках

Ivy предоставляет точные указания на ошибки в шаблонах с номерами строк.

Как проверить работу Ivy?

В tsconfig.app.json:

{
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Хотя начиная с Angular 9+ Ivy включен по умолчанию.

Резюмируем

  • Ivy — это новая архитектура компиляции Angular, основанная на Incremental DOM
  • Основные преимущества: меньший размер бандла, лучшая производительность
  • Позволяет использовать новые возможности (ленивая загрузка, отладка)
  • Обеспечивает обратную совместимость со старыми приложениями
  • Стал стандартом в Angular 9+ и не требует специального включения

Вопросы

Собеседования