Astro 4.4

¡Astro 4.4 ya está disponible! Este lanzamiento incluye auditorías de rendimiento para la dev toolbar, rendimiento de streaming mejorado, la capacidad de inferir automáticamente las dimensiones de imágenes remotas, y más.

Los aspectos destacados incluyen:

• Auditorías de rendimiento
• Lista de auditorías
• Mejorado el rendimiento del streaming
• Nuevas propiedades inferSize para imágenes remotas

Cómo actualizar

Para aprovechar las últimas características, asegúrate de estar ejecutando la última versión de Astro. Puedes actualizar a Astro 4.4 ejecutando el comando @astrojs/upgrade:

npx @astrojs/upgrade

o ejecutando el comando de actualización para tu gestor de paquetes:

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

Auditorías de rendimiento

Astro 4.4 incluye la adición de auditorías de rendimiento para la dev toolbar. Al igual que las auditorías de accesibilidad actualmente disponibles, las auditorías de rendimiento te ayudarán a identificar y corregir problemas de rendimiento en tu sitio de Astro. Por ejemplo, la dev toolbar ahora te advertirá cuando una imagen con carga diferida esté above the fold, recomendando en su lugar que uses eager loading para mejor rendimiento.

Lista de auditorías

A partir de Astro 4.4, la app de auditoría de la dev toolbar incluye una pequeña UI que muestra la lista de problemas que se han detectado. Esta lista es una gran forma de ver rápidamente qué problemas necesitan abordarse y saltar a la parte relevante de la página para corregirlos. En el futuro, expandiremos esta UI para mostrar más información sobre cada problema, y para proporcionar más orientación sobre cómo corregirlos.

Rendimiento de streaming mejorado

Este lanzamiento incluye mejoras de rendimiento para el streaming. Descubrimos recientemente que los ReadableStreams eran más lentos de lo esperado en Node.js, y migramos Astro para usar AsyncIterable en su lugar cuando se ejecuta en Node.js. En particular, este cambio redujo el tiempo de compilación de los sitios web de Starlight con sidebars grandes hasta un 47% en casos extremos. Para más detalles técnicos, consulta el pull request de este cambio.

No se requieren cambios para aprovechar estas mejoras, que benefician tanto a las compilaciones estáticas como al rendimiento en tiempo de ejecución. Puedes tener tiempos de compilación más rápidos y rendimiento en tiempo de ejecución mejorado, como regalo.

Inferir automáticamente las dimensiones de imágenes remotas

Gracias a Oliver Speir, Astro 4.4 ahora puede inferir las dimensiones de las imágenes remotas. El nuevo atributo inferSize puede usarse como reemplazo de los atributos width y height previamente obligatorios en imágenes remotas. Esto es especialmente útil cuando se trabaja con imágenes de un CMS u otras fuentes externas donde las dimensiones de la imagen no se conocen en tiempo de compilación.

Para habilitar esta característica, establece la prop inferSize a true en los componentes Image o 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 />

o como parámetro de getImage():

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

Ten en cuenta que esta característica tiene un coste de rendimiento, notablemente en SSR, ya que requiere una descarga parcial de la imagen para inferir sus dimensiones antes de que el resto de la página pueda renderizarse. Recomendamos usar esta característica solo cuando sea necesario, y en su lugar especificar manualmente los atributos width y height cuando sea posible.

Lee más sobre el uso de inferSize con imágenes remotas en nuestra documentación.

Corrección de Bugs

Como siempre, se incluyen correcciones de bugs adicionales en este lanzamiento. Consulta las notas del lanzamiento para saber más.