Astro 4.4 | Astro

Доступен Astro 4.4! В релизе — аудиты производительности для dev toolbar, улучшенный streaming, автоматическое определение размеров удалённых изображений и многое другое.

Основные новинки:

Аудиты производительности
Список аудитов
Улучшенный streaming
Новые свойства inferSize для удалённых изображений

How to upgrade

Чтобы воспользоваться новинками, убедитесь, что у вас последняя версия Astro. Обновитесь до Astro 4.4 командой @astrojs/upgrade:

npx @astrojs/upgrade

или командой вашего менеджера пакетов:

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Performance audits

Astro 4.4 добавляет аудиты производительности в dev toolbar. Как и аудиты доступности, они помогают находить и исправлять проблемы производительности. Например, toolbar предупредит о lazy-loaded изображении above the fold и порекомендует eager loading.

Shows a tooltip telling the user to use loading='lazy' on an image below the fold.

Audit list

С Astro 4.4 приложение аудита в dev toolbar показывает список обнаруженных проблем. Удобно быстро увидеть, что нужно исправить, и перейти к нужному месту на странице. В будущем расширим UI — больше информации о каждой проблеме и рекомендации по исправлению.

Improved streaming performance

Релиз улучшает streaming. Мы обнаружили, что ReadableStream на Node.js работает медленнее ожидаемого, и перевели Astro на AsyncIterable при работе на Node.js. В крайних случаях время сборки Starlight-сайтов с большими сайдбарами сократилось до 47%. Технические детали: pull request.

Ничего настраивать не нужно — улучшения касаются и статических сборок, и runtime. Быстрее сборка и лучше производительность в рантайме.

Automatically infer dimensions of remote images

Благодаря Oliver Speir Astro 4.4 может определять размеры удалённых изображений. Атрибут inferSize заменяет обязательные width и height для remote images. Особенно полезно с изображениями из CMS или внешних источников, когда размеры неизвестны на этапе сборки.

Установите inferSize в true на компонентах Image или Picture:

---
import { Image, Picture } from "astro:assets";
---

<Image src="https://example.com/image.jpg" alt="A cool image" inferSize />
<Picture src="https://example.com/image.jpg" alt="A cool image" inferSize />

или как параметр getImage():

import { getImage } from "astro:assets";
const processedImage = await getImage({ src: "https://example.com/image.jpg", inferSize: true });

Учтите: есть цена производительности, особенно в SSR — нужна частичная загрузка изображения для определения размеров. Рекомендуем использовать только при необходимости и указывать width и height вручную, когда возможно.

Подробнее: inferSize с удалёнными изображениями.

Bug Fixes

Как обычно, в релизе есть дополнительные исправления. Release notes.