Le domaine du développement front-end de sites Web est en constante évolution et avec la sortie d’Astro 3.0, il fait un grand pas en avant. Astro 3.0 introduit des fonctionnalités et des améliorations révolutionnaires qui promettent de changer la façon dont nous construisons et expérimentons les applications Web. Dans cet article, nous explorons les principaux points forts d'Astro 3.0 et comment il permet aux développeurs de créer des expériences Web plus rapides, plus attrayantes et visuellement époustouflantes.

Afficher les transitions : améliorer la navigation dans les pages

L'une des fonctionnalités exceptionnelles d'Astro 3.0 est sa prise en charge de l'API View Transitions (View Transitions API). Historiquement, les transitions de page fluides et natives étaient associées aux applications à page unique (SPA), nécessitant une configuration JavaScript complexe. Astro 3.0 change cela en rendant ces transitions accessibles à tous sans configuration JavaScript compliquée.

À l'aide des transitions d'affichage, vous pouvez transformer de manière transparente des éléments d'une page à une autre, faire apparaître et disparaître du contenu pour une expérience de navigation plus agréable, faire glisser le contenu pour plus d'attrait et même conserver les éléments d'interface utilisateur communs entre les pages, le tout sans JavaScript lourd. L'intégration est très simple, ne nécessitant généralement que deux lignes de code. Le résultat est un parcours utilisateur visuellement attrayant, auparavant réservé uniquement aux SPA.

Les utilisateurs d'Astro ont eu la chance d'avoir un accès anticipé pour visualiser les transitions depuis Astro 2.9. L'expérimentation et les commentaires de la communauté ont été essentiels pour optimiser cette fonctionnalité afin de garantir qu'elle répond aux normes de qualité et de performances les plus élevées. Une démo créée par les développeurs d'Astro montre ce qui est possible, présentant une application qui ressemble à une expérience native côté client, mais qui est en fait du HTML rendu par le serveur et donné vie par Astro 3.0 et la nouvelle API View Transition.

De plus, Astro 3.0 fournit une prise en charge supplémentaire pour la prise en charge des navigateurs plus anciens, permettant une expérience utilisateur cohérente grâce à de petits scripts d'environ 3 Ko qui sont automatiquement ajoutés à vos pages.

---
// src/pages/index.astro
// 注意：确保将 "<ViewTransitions />" 组件添加到其他页面，而不仅仅是一个页面。
import {ViewTransitions} from 'astro:transitions';
---
<head>
  <title>My View Transition Demo</title>
  <ViewTransitions />
</head>
<body>
  <!-- -->
</body>

Performances de rendu plus rapides : la performance est au cœur

La performance est au cœur d'Astro 3.0. Les performances de rendu ont été considérablement améliorées, la plupart des composants étant rendus plus rapidement jusqu'à 30 % par rapport à Astro 2.9. Dans des benchmarks plus complexes, cette amélioration peut atteindre le chiffre stupéfiant de 75 %.

Cette amélioration des performances est le résultat d'un travail de refactorisation minutieux qui a commencé avec Astro 2.10 et a culminé avec Astro 3.0. Le code inutile a été supprimé du chemin critique du pipeline de build et optimisé lorsque cela était possible. L'élimination des générateurs redondants et du code asynchrone était l'une des stratégies clés pour obtenir cette impressionnante augmentation de vitesse.

Optimisation d'image : la simplicité rencontre l'efficacité

Dans Astro 3.0, l'optimisation d'image est désormais stable et disponible dans tous les projets. L'introduction du composant <Image> intégré simplifie le processus d'importation et de placement d'images sur des pages Web. Astro détecte et optimise automatiquement chaque image pendant le processus de création, garantissant des performances optimales.

Astro est également responsable de l'ajout d'attributs de largeur et de hauteur déduits au balisage final de l'image rendue pour empêcher le changement de mise en page et améliorer la protection contre le changement de mise en page cumulatif (CLS). Cela rend le travail avec des images dans Astro plus fluide et plus efficace que jamais.

---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---

<Image src={myImage} alt="A very cool penguin!" />

Le rôle de cette partie du code est d'importer le composant <Image /> et une référence à l'image, puis d'afficher l'image sur la page. Avant cela, plusieurs améliorations importantes avaient été mises en œuvre, notamment :

Le service d'image intégré de Vercel est entièrement pris en charge. En ajoutant imageService : fidèle à votre configuration d'intégration Vercel, vous pouvez voir des images de production optimisées sur leur CDN global.
Migré vers Sharp en tant que nouvelle bibliothèque optimisée par défaut. Sharp remplace l'ancienne bibliothèque par défaut @squoosh/lib qui n'est plus maintenue.
Prise en charge de l'optimisation des images distantes. Les équipes de contenu peuvent continuer à utiliser leurs flux de travail et outils CMS existants pour gérer les images.

Améliorations du rendu côté serveur (SSR)

Le partenariat d'Astro avec Vercel apporte des améliorations significatives au rendu côté serveur (SSR) d'Astro 3.0. Ces améliorations profitent à tous les utilisateurs, quelle que soit la plateforme d'hébergement de leur choix.

Répartition du code par route : les utilisateurs côté serveur peuvent désormais obtenir de meilleures performances en créant des fichiers de serveur individuels plus petits pour chaque route du site, réduisant ainsi le chargement de code inutile à chaque requête.
Middleware Edge : Astro peut désormais regrouper votre middleware pour un déploiement en périphérie, garantissant ainsi que votre application s'exécute aussi près que possible de l'utilisateur.
Personnalisation de l'hébergement : la nouvelle API d'Astro aide les utilisateurs à comprendre et à exploiter les capacités uniques du fournisseur d'hébergement qu'ils ont choisi, ce qui se traduit par des décisions de développement plus intelligentes et une expérience de production plus fluide.

Améliorations HMR pour JSX : développement facile

Astro 3.0 introduit React Fast Refresh, améliorant considérablement le rechargement à chaud du module (HMR) et la stabilité globale du serveur de développement. Cette fonctionnalité permet aux modifications locales d'être intelligemment transmises au navigateur sans nécessiter une actualisation complète de la page, conservant ainsi l'état actuel de l'interface utilisateur. Cela accélère non seulement le développement, mais élimine également les réinitialisations fréquentes de l’état des pages lors de la mise à jour de l’interface utilisateur.

Sortie de build optimisée : simplifiée et efficace

Astro 3.0 se concentre non seulement sur les performances, mais également sur le temps de réponse global. Grâce à une série de mesures d'optimisation telles que la minification HTML automatique, des identifiants de composants plus clairs et l'intégration automatique de CSS, la sortie de construction d'Astro 3.0 est devenue plus efficace et plus fluide à tous égards. Cela signifie que votre site se chargera plus rapidement et que les utilisateurs seront plus réactifs, améliorant ainsi l'expérience utilisateur globale.

Essayez Astro 3.0 maintenant

Astro 3.0 est désormais disponible sur npm. Pour commencer, visitez astro.new pour essayer Astro 3.0 dans votre navigateur, ou exécutez la commande suivante dans Terminal pour créer un nouveau projet :

npm install -g create-astro
create-astro my-project
cd my-project
npm start

Pour les projets existants, vous pouvez trouver des instructions de mise à niveau détaillées dans le Guide de mise à niveau v3.0 pour plus de détails sur chaque modification et des instructions de mise à niveau individuelles.

https://docs.astro.build/en/guides/upgrade-to/v3/

Dans l’ensemble, Astro 3.0 marque une étape majeure dans le développement front-end de sites Web. Ses fonctionnalités innovantes, ses performances améliorées et ses améliorations conviviales permettent aux développeurs de sites Web de créer facilement des expériences utilisateur exceptionnelles. Que vous créiez un blog personnel ou une application de site Web complexe, Astro 3.0 redéfinira votre approche du développement de sites Web. Plongez en profondeur, explorez les possibilités et propulsez vos projets d'applications Web vers de nouveaux sommets avec Astro 3.0 !

Document de référence :
https://astro.build/blog/astro-3/

Finition

En raison de l'espace limité de l'article, le contenu d'aujourd'hui sera partagé ici. A la fin de l'article, je tiens à vous rappeler que la création de l'article n'est pas facile. Si vous aimez mon partage, n'oubliez pas pour l'aimer et le transmettre, afin que davantage de personnes dans le besoin voient. En même temps, si vous souhaitez acquérir plus de connaissances sur la technologie front-end, n'hésitez pas à me suivre, votre soutien sera la plus grande motivation à partager pour moi. Je continuerai à produire plus de contenu, alors restez à l'écoute.

Avantages pour les fans

Partagez un code source de page d'accueil personnelle très tendance pour vous aider à construire votre marque personnelle (html+css+jq)

Astro 3.0 fait ses débuts, vous permettant de créer facilement des applications frontales plus rapides et plus fluides