Angular IVY Perfomance

На данный момент IVY Renderer находится в разработке, поэтому данное исследование носит предварительный характер, и со временем показатели будут меняться.

Параметры

Angular 7.2.1

TypeScript 3.1.6 (с версией 3.2.2 у IVY возникли проблемы)

Angular CLI 7.2.1

Режим ng serve --prod --aot

Методика испытаний

Производился рендер 11000 случайных чисел, которые передавались в компонент в цикле ngFor. Был замерен интервал между срабатываниями хуков компонента OnInit и AfterViewInit. Данные добавлялись в глобальный массив, и в AfterViewInit родительского компонента вычислялось среднее арифметическое значение.

Как запустить приложение с IVY

• Выполнить в консоли node_modules/.bin/ivy-ngcc для пересборки модулей Angular в совместимый c IVY формат;
• В tsconfig.app.json добавить “enableIvy”: “ngtsc”

• Заменить содержимое main.ts на следующее:

• Из app.module.ts удалить BrowserModule, т.к. он не нужен;
• Удалить из angular.json строчку polyfills, т.к. zone теперь не нужен.

Более подробно про IVY можно почитать в статье Angular Ivy Renderer готовность 93%

Размер бандла

Текущий движок Renderer 2 (View Engine)

Новый движок Renderer 3 (IVY)

Размер сборки с IVY меньше примерно на 160 кб.

Производительность

Скорость рендеринга величина не постоянная, поэтому были взяты выборки из 5 результатов.

Текущий движок Renderer 2 (View Engine)

Новый движок Renderer 3 (IVY)

Средняя скорость отрисовки текущего движка примерно 361 ms, а IVY - 592 ms.

Выводы

Несмотря на то что IVY показал большее время отрисовки, уменьшение размера бандла не может не радовать. И учитывая что работы еще ведутся, стоит ожидать улучшения производительности.

Ссылки

Тестовое приложение с Renderer 2

Тестовое приложение с IVY(как запустить написано выше)