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 cinq mois seulement après Vite 3. La nouvelle version est livrée avec de nouvelles fonctionnalités et mises à jour qui rendront l'expérience de développement JavaScript plus rapide et plus solide qu'auparavant.
Ici, nous discuterons de ce qu'est Vite, des fonctionnalités importantes et des mises à jour trouvées dans Vite 4.
Qu'est-ce que j'ai Vite ?
Le mot "vite" lui-même signifie "rapide". Il s'agit d'un outil de construction frontal et d'un serveur de développement conçu pour fournir 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. Cumul 3
Cumul est un bundler de modules JavaScript qui permet aux développeurs de regrouper différents Modules Javascript dans un seul fichier. Cela améliore à son tour les performances de l'application en réduisant le nombre de requêtes que le navigateur doit effectuer pour charger le code.
Vite utilise désormais Rollup 3 pendant la construction. La version 3 de Vite utilisait Rollup 2 mais après la sortie de Rollup 3 en octobre 2022, la nouvelle version de Vite était accompagnée d'une mise à jour majeure vers Rollup 3.
Vous devez vous référer au guide de migration Rollup avant la mise à niveau vers Rollup 3, car des problèmes peuvent survenir, même si Rollup 3 est principalement compatible avec Rollup 2.
2. Nouveau plugin React utilisant Speedy Web Compiler (SWC)
CFC est un compilateur JavaScript ultra-rapide écrit en Rust. CFC et Babel sont tous deux des compilateurs JavaScript qui transforment votre code en ce qui est pris en charge par les navigateurs, mais SWC prétend être plus rapide que Babel.
Étant donné que Vite v3 utilisait Babel, la v4 s'accompagne de l'introduction de SWC en remplacement ou en alternative, en particulier pour les projets React.
Alors que Vite continue de prendre en charge 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 du module à 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 Babel.
Le remplacement du module à chaud permet un rafraîchissement des graisses. Il permet aux développeurs de mettre à jour les modules d'une application en cours d'exécution sans avoir à actualiser 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 ;
importer { définirConfig } depuis'vite'
importer réagir depuis'@vitejs/plugin-react'
exporterdéfaut définirConfig({
plugins: [réagir()],
})
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 considérablement 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 ;
importer { définirConfig } depuis"vite";
importer réagir depuis"@vitejs/plugin-react-swc";
exporterdéfaut définirConfig({
plugins: [réagir()],
});
3. Importation de CSS sous forme de chaîne
Cette fonctionnalité donne une solution au comportement de double chargement CSS Vite 3 qui se produit en important l'exportation par défaut d'un fichier CSS, par exemple :
importer cssString depuis'./global.cssPour éviter ce comportement, Vite 4 introduit l'utilisation du modificateur de suffixe de requête ?inline. Voici une démonstration de la syntaxe ;
importer cssString depuis'./global.css? en ligne'L'export CSS v3 par défaut est donc obsolète.
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 obligera à envelopper les valeurs qui incluent les caractères "#" ou "`" entre guillemets pour garantir un fonctionnement correct. Voici un exemple;
SECRET_HASH="quelque chose-avec-un-#-hacher"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 plug-in facultatif qui peut aider à garantir la cohérence des fichiers ENV entre les différentes machines, environnements ou membres de l'équipe. Cela peut aider à rendre le processus de mise à jour des fichiers ENV moins fastidieux.
Autres mises à niveau, correctifs et migration vers Vite v4.0.4
Vite a ajouté plus de raccourcis d'interface de ligne de commande. Pour voir une liste de tous les raccourcis, appuyez sur h pendant le développement.
La version moderne du navigateur cible également safari14 par défaut pour une compatibilité ES2020 plus large. Il existe un support pour le package de correctifs lors du pré-groupement des dépendances, il y a des messages d'erreur améliorés pendant le SSR et bien plus encore.