С каждым новым релизом Angular значительно улучшается как с точки зрения удобства разработки, так и с точки зрения производительности. Такие функции, как реактивная модель на основе сигналов (Signals) и поддержка серверного рендеринга (SSR), уже доказали свою полезность.
В Angular v20 фреймворк делает следующий шаг, сделав высокую производительность стандартным поведением всех приложений. Благодаря комплексным изменениям в архитектуре Angular v20 позволяет разработчикам легко строить быстрые, отзывчивые и масштабируемые веб-приложения, не требуя от них дополнительных усилий.
Но что это означает на практике?
Давайте рассмотрим ключевые новые возможности Angular v20, которые делают его важным этапом в области производительности.
Серверный рендеринг: Высокая производительность в массовом масштабе
Серверный рендеринг остаётся критически важной функцией для ускорения начальной загрузки и улучшения SEO. Генерируя содержимое страниц на сервере, Angular может быстрее отображать контент и получать лучшие позиции в поисковых системах.
В версии Angular v16 была представлена полная гидратация приложения (Full-Application Hydration). Эта функция позволяет клиенту повторно использовать DOM-структуры, созданные на сервере, сохранять состояние приложения и передавать данные, загруженные ещё на стороне сервера. Без гидратации весь DOM пришлось бы пересоздавать заново, что замедляет взаимодействие с пользователем.
На этой основе в v19 был представлен инкрементальный режим гидратации в предварительной версии для разработчиков. Он позволяет откладывать гидратацию определённых частей приложения до тех пор, пока они не понадобятся, тем самым уменьшая размер бандла и ускоряя время до первого взаимодействия пользователя с интерфейсом.
И вот хорошая новость: в Angular v20 инкрементальная гидратация становится стабильной, то есть готова к использованию в production-средах.
Чтобы активировать эту функцию:
- Используйте provideClientHydration с withIncrementalHydration() в конфигурации приложения.
- Применяйте блоки defer с триггерами гидратации, такими как hydrate on, hydrate when или hydrate never.
Эти инструменты дают разработчику точный контроль над тем, когда и как будет происходить гидратация — например, в ответ на действия пользователя или другие условия.
Более подробную информацию можно найти в руководстве по инкрементальной гидратации на Angular.dev, а также следить за обновлениями на официальном YouTube-канале Angular.
Точное управление стратегиями рендеринга
Инкрементальная гидратация — это лишь часть улучшений SSR в Angular v20.
В версии v19 были добавлены API конфигурации режима рендеринга на уровне маршрутов в режиме предварительного просмотра. Эти API позволяют явно указать, как должны рендериться отдельные маршруты — на сервере, статически во время сборки или полностью на клиенте.
Это открывает ряд преимуществ: - Повышенная производительность за счёт выборочного рендеринга - Лучшая SEO-оптимизация - Улучшенный пользовательский опыт - Встроенная поддержка локализации - Беспрепятственная интеграция с сервером разработки
Теперь, в Angular v20, эти API конфигурации режима рендеринга становятся стабильными, что позволяет уверенно использовать их в production-проектах.
Итак, дерзайте — настраивайте рендеринг с уверенностью.
Режим без зон (Zoneless): Новый уровень точности
Одним из самых ожидаемых нововведений в Angular v20 стал переход Zoneless Angular в режим предварительного просмотра для разработчиков.
Ранее Angular полагался на ZoneJS для отслеживания изменений состояния приложения. Однако такой подход приводил к ненужным циклам проверок, так как ZoneJS модифицировал API браузера и запускал обнаружение изменений после почти любого события — даже если оно не затрагивало шаблон.
В режиме без зон разработчики получают возможность явно управлять временем и способом запуска механизма обнаружения изменений. Например:
- Вручную вызывая markForCheck()
- Используя Angular Signals, которые точно знают, когда их состояние изменилось, и могут запускать обновления только тогда, когда это действительно необходимо
Комбинация Zoneless + Signals приводит к: - Снижению количества ненужных проверок изменений - Уменьшению размера JavaScript-пакетов - Улучшению процесса отладки - Повышению совместимости с внешними библиотеками
Как включить режим без зон?
1. Обновитесь до Angular v20
2. Добавьте provideZonelessChangeDetection() в список провайдеров
3. Удалите зависимость zone.js из проекта
Всё, вы запустили Angular в режиме без зон — с более высокой производительностью и предсказуемостью.
Дополнительные сведения доступны в официальной документации на Angular.dev.
Инструменты анализа производительности для Angular-разработчиков
Конечно, все эти улучшения теряют смысл, если у вас нет необходимых инструментов для мониторинга и отладки производительности.
Chrome DevTools всегда предоставлял такие возможности, как flame chart, но работа с большим объёмом информации может быть сложной. Чтобы упростить задачу, команда Angular сотрудничала с Chrome для создания персонализированной дорожки профилирования данных, специфичных для Angular.
Эта дорожка отображает данные, связанные именно с вашим кодом, и помогает отличать его от других библиотек.
Хотите попробовать? - Убедитесь, что вы используете Angular v20 - Запустите своё приложение в Chrome 136+ - Откройте DevTools > Performance tab - Начните запись, чтобы зафиксировать интересующие вас события - После завершения записи найдите нужные данные в новой Angular-вкладке
Это улучшение выводит телеметрию, специфичную для Angular, прямо к разработчикам, позволяя принимать обоснованные решения относительно производительности приложений.
Производительность по умолчанию
Angular v20 представляет собой важный этап в создании высокопроизводительных приложений «из коробки». С функциями, такими как инкрементальная гидратация, конфигурации рендеринга на уровне маршрутов и режим без зон, разработчики получают мощный набор инструментов для оптимизации производительности без потери гибкости или простоты обслуживания.
Готовы воспользоваться этими возможностями?
Обновляйтесь до последней версии Angular уже сегодня и создавайте высокопроизводительные приложения, которые ваши пользователи будут ценить.
Хотите узнать больше? Посетите angular.dev или подпишитесь на официальный YouTube-канал Angular.