Qu'est-ce que Vite ?

Qu'est-ce que Vite ?

Vite est un outil de build pour le frontend créé par Evan You, le créateur de Vue.js. En développement, il sert vos fichiers source au navigateur via des modules ES natifs : le serveur de développement démarre vite et les changements apparaissent grâce au remplacement de modules à chaud (HMR). Pour la production, il regroupe votre code avec Rolldown en fichiers statiques optimisés que n'importe quel serveur web ou CDN peut héberger.

La version majeure actuelle est Vite 8, publiée le 12 mars 2026. Les anciens tutoriels décrivent Vite 7 et les versions antérieures, qui utilisaient esbuild en développement et Rollup pour le build de production. Cette différence compte quand vous lisez un ancien guide ou le readme d'un plugin.

Comment fonctionne Vite

Développement : modules ES natifs

Vite sert le code source à la demande via l'ESM natif : le navigateur ne charge que ce que la page courante importe. Le démarrage reste rapide quand le projet grandit, car rien n'a besoin d'être regroupé d'abord. Les bibliothèques de node_modules sont pré-empaquetées une fois, pour deux raisons données par la documentation de Vite : les paquets CommonJS et UMD doivent être convertis en ESM, et un paquet comportant de nombreux modules internes devient une seule requête au lieu de centaines. Dans Vite 8, ce pré-empaquetage est assuré par Rolldown.

Production : une seule chaîne de regroupement

L'ESM non regroupé reste lent en production, car les imports imbriqués ajoutent des allers-retours réseau : vite build regroupe donc le code, le découpe et ajoute des hachages aux noms de fichiers. Rolldown est un bundler écrit en Rust par l'équipe VoidZero pour remplacer esbuild et Rollup, afin que le développement et la production partagent la même chaîne. L'annonce de Vite 8 évoque des builds jusqu'à 10 à 30 fois plus rapides et cite des utilisateurs comme Linear, dont le build de production est passé de 46 s à 6 s. Ce sont des chiffres communiqués par les éditeurs pour leurs propres projets : mesurez votre propre build.

Ce qui fonctionne sans configuration supplémentaire

• TypeScript et JSX. Vite transpile les fichiers .ts avec le transformateur Oxc, mais ne vérifie pas les types. Lancez tsc --noEmit en CI.
• CSS. CSS simple, modules CSS (tout fichier se terminant par .module.css) et PostCSS.
• Imports par glob. import.meta.glob importe de nombreux modules selon un motif, avec chargement différé par défaut.
• Web workers. La forme recommandée est new Worker(new URL(...)).
• Variables d'environnement. Elles sont lues via import.meta.env depuis des fichiers .env.
• Modèles officiels pour JavaScript pur, Vue, React, Preact, Lit, Svelte, Solid et Qwik, chacun avec une variante TypeScript.

Prérequis : Vite 8 demande Node.js 20.19+ ou 22.12+. La sortie de production cible les navigateurs classés Baseline Widely Available à une date fixée pour chaque version majeure (environ mi-2023 pour celle-ci). Les navigateurs plus anciens nécessitent @vitejs/plugin-legacy.

Exemple : une URL d'API qui arrive dans le navigateur

Vous ajoutez VITE_API_URL=https://api.example.com dans .env.production et la lisez avec import.meta.env.VITE_API_URL. Vite la remplace par la valeur littérale au moment du build. Une variable sans le préfixe VITE_, comme DB_PASSWORD, reste hors du code client et vaut undefined dans le navigateur. L'envers de la médaille : tout ce qui porte le préfixe est visible par tous les visiteurs, ne mettez donc jamais de secret dans une variable VITE_.

Erreurs courantes

• Utiliser process.env. Dans le code navigateur, Vite utilise import.meta.env. Le code migré doit voir ses références mises à jour.
• Mettre des secrets dans des variables VITE_. Elles finissent dans le bundle public.
• Prendre le serveur de développement pour un aperçu de la production. Le développement sert des modules non regroupés, la production sert des bundles. Lancez vite build puis vite preview avant de juger les performances.
• Croire que les erreurs de types font échouer le build. Ce n'est pas le cas tant que vous n'ajoutez pas une étape de vérification des types.
• Ignorer la taille du bundle. Un build rapide ne dit rien de la quantité de JavaScript téléchargée par le visiteur. Découpez les routes et appliquez le chargement différé à ce qui n'est pas nécessaire au premier rendu.
• Utiliser une version de Node non prise en charge, qui échoue à l'installation ou au démarrage.

Vite et webpack

webpack regroupe toute l'application avant de pouvoir la servir en développement. Vite sert les modules à la demande et ne regroupe que pour la production, c'est pourquoi les gros projets démarrent plus vite. webpack dispose d'un écosystème de plugins plus grand et plus ancien, et certaines fonctions propres à webpack n'ont pas d'équivalent direct dans Vite : vérifiez vos plugins avant de migrer. L'API de plugins de Vite s'appuie sur celle de Rollup, et Vite 8 maintient la compatibilité avec les plugins existants grâce à une couche de compatibilité.

Rendu côté serveur

Vite prend en charge nativement le rendu côté serveur (SSR), mais son guide qualifie l'API de bas niveau et destinée aux auteurs de bibliothèques et de frameworks. La plupart des équipes utilisent plutôt un framework qui l'encapsule. Pour les compromis d'une application rendue côté client, voir applications monopages.

Vite, tests de performance et monitoring

Vite raccourcit votre build et votre boucle de retour. Il ne décide pas de la rapidité ressentie du site fini. Testez le build de production : le monitoring de la vitesse des pages de LoadFocus exécute des audits Lighthouse planifiés et des vérifications Core Web Vitals depuis 25 régions cloud, pour voir si un changement de bundle a aidé de vraies pages. Une application monopage construite avec Vite appelle aussi des API, et ce sont elles qui cèdent d'abord sous la charge. Le monitoring d'API surveille les points d'accès dont dépend votre application, et un test de charge montre comment le backend se comporte avec de nombreux utilisateurs simultanés. Deux guides vont plus loin : tests de charge pour applications monopages et performance JavaScript. La configuration est détaillée dans le guide officiel de Vite.

Questions fréquentes : Vite

Vite est-il un bundler ?

C'est un outil de build qui comprend un serveur de développement et un build de production. Le regroupement lui-même est assuré par Rolldown dans Vite 8 (Rollup dans Vite 7 et antérieur).

Vite vérifie-t-il les types TypeScript ?

Non. Vite se contente de transpiler TypeScript. Lancez tsc --noEmit, ou la commande de vérification des types de votre framework, en CI ou comme processus séparé pendant le développement.

Quelle version de Node.js faut-il pour Vite ?

Vite 8 demande Node.js 20.19+ ou 22.12+. Certains modèles peuvent exiger une version plus récente.

Vite fonctionne-t-il avec React et Vue ?

Oui. Les modèles officiels couvrent React, Vue, Preact, Svelte, Solid, Lit et Qwik, et Vite fournit une API HMR que les plugins des frameworks utilisent pour mettre à jour sans rechargement complet.

Comment lire les variables d'environnement dans Vite ?

Avec import.meta.env. Seules les variables préfixées par VITE_ atteignent le code client, et il faut redémarrer le serveur de développement après avoir modifié les fichiers .env.