Vite, l’outil pour développeurs web, est à sa version 3

Vite, l’outil pour développeurs web, est à sa version 3. Il vise à fournir une expérience de développement plus rapide
et plus légère pour les projets web modernes

En février de l'année dernière, Evan You, fondateur de Vue Technology a publié Vite 2. Depuis, son adoption n'a cessé de croître, atteignant plus d'un million de téléchargements npm par semaine. Un écosystème très étendu s'est rapidement formé après la sortie de Vite. Evan YOU a annoncé la version 3 de Vite, un outil de développement web qui vise à fournir une expérience de développement plus rapide et plus légère pour les projets web modernes.

« 16 mois après le lancement de la v2, nous sommes heureux d'annoncer la sortie de Vite 3. Nous avons décidé de sortir une nouvelle version majeure de Vite au moins tous les ans pour nous aligner sur l'EOL de Node.js, et profiter de l'occasion pour revoir régulièrement l'API de Vite avec un chemin de migration court pour les projets de l'écosystème », l'équipe Vite.

Pièce jointe 622234

Notons que Node.js est un environnement d'exécution JavaScript basé sur le moteur JavaScript V8 de Google qui exécute le code JavaScript en dehors du navigateur. Il aide les développeurs à créer des unités de code non bloquantes afin de tirer le meilleur parti des ressources système pour créer des applications plus réactives.

Nuxt 3 utilise Vite par défaut. SvelteKit, Astro, Hydrogen et SolidStart sont tous construits avec Vite. Laravel a maintenant décidé d'utiliser Vite par défaut. Vite Ruby montre comment Vite peut améliorer Rails DX. Vitest fait des progrès en tant qu'alternative native de Vite à Jest. Vite est à l'origine des nouvelles fonctionnalités de test de composants de Cypress et Playwright, Storybook a Vite comme constructeur officiel. Et la liste est encore longue. Les mainteneurs de la plupart de ces projets ont participé à l'amélioration du noyau de Vite lui-même, en travaillant en étroite collaboration avec l'équipe Vite et d'autres contributeurs.

Modèles de démarrage Create Vite

Les modèles create-vite ont été un excellent outil pour tester rapidement Vite avec un framework. Dans Vite 3, tous les modèles ont reçu un nouveau thème en accord avec la nouvelle documentation.

Pièce jointe 622235

Le thème est maintenant partagé par tous les modèles. Cela devrait permettre de mieux faire comprendre la portée de ces modèles de départ, qui sont des modèles minimaux pour commencer à utiliser Vite. Pour des solutions plus complètes incluant le linting, la configuration des tests et d'autres fonctionnalités, il existe des modèles officiels alimentés par Vite pour certains frameworks comme create-vue et create-svelte. Il existe une liste de modèles maintenue par la communauté à Awesome Vite.

Support des navigateurs

Le build par défaut cible les navigateurs qui supportent à la fois les modules ES natifs et l'importation dynamique ESM native. Les anciens navigateurs peuvent être supportés via le plugin officiel @vitejs/plugin-legacy.

Vite CLI

VITE v3.0.0 ready in 320 ms

➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose

Contrairement à la version 2 de Vite, le port par défaut du serveur de développement est désormais 5173 et le serveur de prévisualisation écoute 4173 sur Vite 3. Ce changement permet à Vite d'éviter les collisions avec d'autres outils.

Stratégie de connexion WebSocket améliorée

L'un des points sensibles de Vite 2 était la configuration du serveur lorsqu'il fonctionnait derrière un proxy. Vite 3 modifie le schéma de connexion par défaut afin qu'il fonctionne dans la plupart des scénarios. Toutes ces configurations sont maintenant testées dans le cadre du CI de l'écosystème Vite via vite-setup-catalogue.

Améliorations du démarrage à froid

Vite évite maintenant le rechargement complet pendant le démarrage à froid lorsque les importations sont injectées par des plugins tout en explorant les modules initiaux importés statiquement.

Optimisation des dépendances Esbuild au moment de la construction (expérimental)

Une des principales différences entre les phases de développement et de construction est la façon dont Vite gère les dépendances. Pendant la phase de construction, @rollupjs/plugin-commonjs est utilisé pour permettre l'importation de dépendances CJS uniquement (comme React). Lors de l'utilisation du serveur de développement, esbuild est utilisé à la place pour pré-emballer et optimiser les dépendances, et un schéma d'interopérabilité en ligne est appliqué lors de la transformation du code utilisateur important des dépendances CJS.

Pendant le développement de Vite 3, l’équipe en charge a introduit les changements nécessaires pour permettre également l'utilisation d'esbuild pour optimiser les dépendances pendant la construction. @rollupjs/plugin-commonjs peut alors être évité, ce qui fait que les temps de développement et de construction fonctionnent de la même manière.

« Étant donné que Rollup v3 sortira dans les prochains mois, et que nous allons suivre avec un autre majeur Vite, nous avons décidé de rendre ce mode optionnel pour réduire la portée de la v3 et donner à Vite et à l'écosystème plus de temps pour résoudre les problèmes possibles avec la nouvelle approche d'interopérabilité CJS pendant la construction », déclare EVAN YOU.

Les frameworks peuvent passer à l'utilisation de l'optimisation esbuild deps pendant la construction par défaut et à leur propre rythme avant Vite 4. Il existe un support opt-in pour HMR Partial Accept. Cette fonctionnalité pourrait débloquer un HMR à granularité plus fine pour les composants du framework qui exportent plusieurs liaisons dans le même module.

Réduction de la taille des paquets

Vite regroupe la plupart de ses dépendances et essaie d'utiliser des alternatives modernes et légères lorsque cela est possible. Dans la continuité de cet objectif, la taille de la publication de Vite 3 est 30 % plus petite que la v2. Il existe un support opt-in pour HMR Partial Accept. Cette fonctionnalité pourrait débloquer un HMR à granularité plus fine pour les composants du framework qui exportent plusieurs liaisons dans le même module.

Cette réduction a été possible en partie en rendant optionnelles certaines dépendances dont la plupart des utilisateurs n'avaient pas besoin. Premièrement, Terser n'est plus installé par défaut. Cette dépendance n'était plus nécessaire puisque l’équipe en charge a déjà fait d'esbuild le mineur par défaut pour JS et CSS dans Vite 2. Si vous utilisez build.minify : 'terser', vous devrez l'installer (npm add -D terser).

Node-forge a également été deplacé hors du monorepo, en implémentant le support pour la génération automatique des certificats https comme un nouveau plugin : @vitejs/plugin-basic-ssl. Puisque cette fonctionnalité ne crée que des certificats non fiables qui ne sont pas ajoutés au store local, elle ne justifiait pas la taille ajoutée.

Source : Vite

Et vous ?

:fleche: Quel est votre avis sur cet outil pour le développement web ? Un de trop ou pas ?

:fleche: Pensez-vous que les développeurs devraient travailler pour améliorer l'existant plutôt que d'en créer de nouveaux ?

Voir aussi :

:fleche: La Version 1.9 de Deno, le runtime pour exécuter JavaScript et TypeScript, est disponible, elle améliore les appels de commande dans Rust et apporte de nouvelles fonctionnalités

:fleche: State of JavaScript 2020 : TypeScript leader incontestable des déclinaisons de JavaScript, le typage statique devient la fonctionnalité la plus demandée et React reste le framework front-end dominant

:fleche: Deno passe en version 1.0. Le runtime pour exécuter JavaScript et TypeScript, tente de fournir un outil autonome pour l'écriture rapide de fonctionnalités complexes

:fleche: Quels sont les coûts liés à l'utilisation de frameworks JavaScript pour le développement Web ? Une analyse des sites utilisant React, Vue.js ou Angular