На встречи IT talk Dnipro Александр Трищенко, Senior JavaScript Developer, DataArt, рассказал, как улучшить производительность Angular 2.

Говорили:

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

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

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

На практическом примере с использованием Angular CLI разобрали техники и методологии. Александр рассмотрел Tree Shaking и особенности его использования в Angular 2 и Angular 4. Второй немаловажный способ повышения производительности — компиляция. JIT и AOT нужны оба, но предназначены для разных целей.

Еще проговорили, почему для продакшена AOT лучше: меньший бандл и быстрее загрузка, больше не нужно загружать компилятор, выше производительность во время выполнения. AOT более безопасен, потому что JIT использует eval.

Александр рассказал, каких результатов с производительностью можно добиться благодаря хорошей архитектуре. Архитектура — всеобъемлющее понятие потому обсуждали конкретные кейсы использования: zone.js, rx.js, модульную архитектуру и композицию компонентов, стратегии обнаружения изменений и использование иммутабельных типов данных в связке с onPush.

Фотоотчет: https://www.flickr.com/photos/outsourcing/albums/72157680228323814

Презентация: https://www.slideshare.net/OleksandrTryshchenko/how-to-tweak-angular-2-performance