Vite v4.0.4 est sorti le 3 janvier 2023 et améliore les fonctionnalités de l’environnement de développement Vite et arrive juste cinq mois après Vite 3. La nouvelle version est accompagnée de nouvelles fonctionnalités et de mises à jour qui rendront l’expérience de développement JavaScript plus rapide et plus forte qu’auparavant.
Ici, nous allons discuter de ce qu’est Vite, des fonctionnalités importantes et des mises à jour trouvées dans Vite 4.
Qu’est-ce que Vite ?
Le mot « vite » signifie lui-même « rapide ». Il s’agit d’un outil de construction frontale et d’un serveur de développement conçu pour offrir une expérience de développement plus rapide, légère et simple. Il sert votre code pendant le développement, regroupe vos fichiers pour la production et permet une intégration facile avec divers frameworks et bibliothèques JavaScript, tels que Vue, React, Preact et Svelte.
Vite a subi de nombreuses améliorations au cours des deux dernières années, et Vite 4 apporte plusieurs fonctionnalités nouvelles et améliorées.
1. Rollup 3
Rollup est un regroupeur de modules JavaScript qui permet aux développeurs de regrouper différents modules JavaScript dans un seul fichier. Cela permet d’améliorer les performances de l’application en réduisant le nombre de requêtes que le navigateur doit effectuer pour charger le code.
Vite utilise maintenant Rollup 3 pendant la construction. La version 3 de Vite utilisait la Rollup 2 mais suite à la sortie de la Rollup 3 en octobre 2022, la nouvelle version de Vite était accompagnée d’une mise à niveau majeure vers la Rollup 3.
Vous devez consulter le guide de migration de Rollup avant de procéder à la mise à niveau vers Rollup 3, car des problèmes peuvent survenir, même si Rollup 3 est en grande partie compatible avec Rollup 2.
2. Nouveau plugin React utilisant Speedy Web Compiler (SWC)
SWC est un compilateur JavaScript ultra-rapide écrit en Rust. SWC et Babel sont tous deux des compilateurs JavaScript qui transforment votre code en ce qui est pris en charge par les navigateurs, mais SWC a affirmé être plus rapide que Babel.
Comme Vite v3 utilisait Babel, la v4 vient avec l’introduction de SWC comme remplacement ou alternative, en particulier pour les projets React.
Alors que Vite continue à supporter Babel, Vite 4 introduit deux plugins (vitejs/plugin-react et vitejs/plugin-react-swc) avec des compromis différents pour les projets React.
Le plugin vitejs/plugin-react
Ce plugin fournit un remplacement rapide des modules à chaud tout en utilisant une taille de paquet minimale, en utilisant esbuild et Babel. Il offre également la flexibilité supplémentaire de pouvoir utiliser le pipeline de transformation de Babel.
Le remplacement de module à chaud permet le fat refresh. Il permet aux développeurs de mettre à jour les modules dans une application en cours d’exécution sans avoir à rafraîchir la page entière. Suivez la démonstration ci-dessous pour installer le plugin dans votre projet.
npm install @vitejs/plugin-react
Suivez le code ci-dessous pour importer le plugin dans votre projet ;
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
Le plugin vitejs/plugin-react-swc
Il s’agit d’un nouveau plugin qui utilise esbuild pendant la construction, et Speed Web Compiler pendant le développement.
En remplaçant Babel par SWC, le plugin vise à accélérer de manière significative le processus de développement, en particulier pour les projets qui ne nécessitent pas d’extensions React non standard.
Voici comment installer le plugin ;
npm i @vitejs/plugin-react-swc
Importez-le dans votre projet comme suit ;
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
3. Importation de CSS sous forme de chaîne
Cette fonctionnalité apporte une solution au comportement de double chargement des CSS de Vite 3 qui se produit en important l’exportation par défaut d’un fichier CSS, par exemple :
import cssString from './global.css
Pour éviter ce comportement, Vite 4 introduit l’utilisation du modificateur de suffixe ?inline query. Voici une démonstration de la syntaxe ;
import cssString from './global.css?inline'
L’exportation CSS par défaut de la v3 a donc été dépréciée.
4. Variables d’environnement
Vite a mis à jour ses dépendances sur dotenv et dotenv-expand. Les nouvelles versions utilisées sont respectivement dotenv 16 et dotenv-expand 9. Cette mise à jour vous demandera d’entourer les valeurs qui incluent les caractères « # » ou « ` » de guillemets pour assurer un fonctionnement correct. Voici un exemple ;
SECRET_HASH="something-with-a-#-hash"
Pour faciliter le processus de mise à jour des fichiers ENV, Vite a recommandé l’utilisation de l’interface de ligne de commande dotenv. Il s’agit d’un plugin optionnel qui permet de s’assurer que les fichiers ENV sont cohérents entre les différentes machines, environnements ou membres de l’équipe. Il peut contribuer à rendre le processus de mise à jour des fichiers ENV moins fastidieux.
Autres mises à jour, corrections et migration vers Vite v4.0.4
Vite a ajouté plus de raccourcis dans l’interface de ligne de commande. Pour voir une liste de tous les raccourcis, appuyez sur h pendant le développement.
La construction du navigateur moderne cible désormais safari14 par défaut pour une plus grande compatibilité ES2020. La prise en charge de patch-package lors du pré-regroupement des dépendances, l’amélioration des messages d’erreur pendant le SSR et bien plus encore.