Vite

Qu’est-ce que Vite ?

Vite est un outil de build qui remplit deux fonctions : un serveur de développement prêt presque instantanément, et un build de production qui génère des bundles optimisés. Créé par Evan You en 2020, il est devenu la chaîne d’outils par défaut pour la plupart des frameworks front-end modernes.

L’idée fondamentale est que le développement et la production présentent des goulots d’étranglement différents. En développement, vous recherchez un démarrage et des mises à jour rapides ; Vite ne procède donc à aucun bundling — il sert vos sources via des modules ES natifs et transforme les fichiers à la demande. En production, vous voulez un résultat le plus léger et rapide possible, c’est pourquoi Vite utilise Rollup pour le bundling et l’optimisation.

Le serveur de développement

L’exécution de vite lance un serveur de développement qui sert vos sources sous forme de modules ES natifs. Le navigateur demande chaque module, et Vite le transforme à la volée.

# terminal
vite          # start the dev server
vite build    # production build
vite preview  # preview the production build locally

Comme il n’y a pas de bundle complet à produire, le démarrage se mesure en millisecondes et reste constant à mesure que le projet s’agrandit. Les dépendances sont pré-bundlées une seule fois avec esbuild, car elles changent rarement, ce qui évite un flux massif de petites requêtes. Le remplacement de module à chaud (Hot Module Replacement) ne met ensuite à jour que les modules modifiés, en préservant l’état de l’application lorsque c’est possible.

Le build de production

vite build exécute le pipeline Rollup et écrit le résultat dans dist par défaut.

• Le Tree-shaking supprime les exports inutilisés.
• Le Code splitting génère des chunks pour les routes et les imports dynamiques.
• La Minification réduit la taille du JavaScript, du CSS et du HTML.
• Le Hachage des assets ajoute des hashs de contenu pour optimiser la mise en cache à long terme.
• La Gestion du CSS extrait et minifie les feuilles de style.

Le résultat est un ensemble de fichiers statiques que vous pouvez déployer sur n’importe quel hébergeur, CDN ou plateforme statique.

Configuration

Vite lit un fichier vite.config.ts à la racine du projet.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": "/src" },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8787",
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
});

L’option resolve.alias permet de créer des raccourcis d’importation, et server.proxy redirige les requêtes API vers un backend pendant le développement, ce qui évite les problèmes de CORS. La plupart des configurations de frameworks génèrent ce fichier pour vous et ne nécessitent que quelques ajouts mineurs.

Plugins

Les plugins sont le moyen par lequel Vite apporte son support aux frameworks et aux outils. Ils implémentent une interface compatible avec Rollup, enrichie de hooks spécifiques à Vite.

// plugins.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
});

Les plugins courants couvrent React, Vue, Svelte et Solid, ainsi que des outils CSS comme Tailwind, le support des navigateurs obsolètes, les fonctionnalités PWA et l’analyse de bundle. L’interface étant compatible avec Rollup, une grande partie de l’écosystème de plugins Rollup fonctionne directement.

Variables d’environnement

Vite charge les variables depuis des fichiers .env et n’expose au code client que celles préfixées par VITE_.

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=secret

// env.ts
const url = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

Le préfixe VITE_ est un mécanisme de sécurité : tout ce qui ne le possède pas reste en dehors du bundle client, évitant ainsi toute fuite accidentelle de secrets. Les variables sont remplacées lors de la compilation (build time) et non lues lors de l’exécution (runtime), et sont accessibles via import.meta.env.

Assets et CSS

Vous importez vos assets directement depuis JavaScript, et Vite s’occupe du reste.

// assets.ts
import logo from "./logo.svg";
import "./styles.css";
import styles from "./Button.module.css";

Les petits assets sont intégrés sous forme d’URLs de données (data URLs), les plus volumineux sont générés avec des noms hachés, et le CSS importé de cette manière est regroupé et, en développement, bénéficie du hot-reloading. Le répertoire public est destiné aux fichiers qui doivent conserver un chemin exact, comme robots.txt ou un favicon référencé par URL.

Code splitting

L’import dynamique import() crée un chunk séparé chargé à la demande, ce qui constitue le levier principal pour maintenir la taille du bundle initial réduite.

// lazy.ts
const { Chart } = await import("./Chart");

Appliquez-le aux routes, aux modales, aux éditeurs et à toute fonctionnalité qui n’est pas nécessaire lors du premier affichage (first paint). Les frameworks basés sur Vite gèrent souvent le splitting au niveau des routes pour vous, mais comprendre ce mécanisme primitif est utile lorsque vous avez besoin d’un contrôle plus précis.

Au-delà de l’application

Vite ne sert pas uniquement aux applications mono-page. Le Library mode permet de créer un package distribuable avec les formats appropriés et des dépendances externalisées. Vite prend également en charge le server-side rendering, et il constitue le moteur interne de Vitest, Astro, Nuxt et SvelteKit. Cette fondation commune explique pourquoi la même configuration, les mêmes alias et les mêmes plugins fonctionnent pour le développement, les tests et le build.

Bonnes pratiques

• Gardez une configuration minimale et laissez les plugins du framework gérer les détails.
• Utilisez resolve.alias pour des imports propres au lieu de longs chemins relatifs.
• Utilisez un proxy pour l’API en développement plutôt que de coder l’hôte en dur.
• Préfixez les variables d’environnement côté client avec VITE_ et laissez les secrets sans préfixe.
• Fractionnez les fonctionnalités lourdes avec des imports dynamiques.
• Importez les assets depuis JavaScript pour qu’ils soient hashés et optimisés.
• Activez les source maps en production si vous utilisez un outil de suivi d’erreurs.

Erreurs courantes

• S’attendre à trouver process.env dans le code client au lieu de import.meta.env.
• Exposer des secrets en les préfixant par VITE_.
• Placer dans public des fichiers qui devraient être importés et hachés.
• Livrer un seul bundle énorme en n’utilisant jamais d’imports dynamiques.
• Ajouter des plugins qui font doublon avec les fonctionnalités d’un plugin de framework.
• Lutter contre la configuration au lieu d’utiliser un preset de framework.

Et après ?

Vite est le socle de la chaîne d’outils moderne. Comparez-le avec Webpack pour les projets plus anciens, lancez vos tests avec Vitest, et découvrez comment il propulse les frameworks dans les guides React, Astro et SvelteKit. Ensuite, ouvrez le fichier vite.config.ts d’un projet et effectuez une modification volontaire pour en observer l’effet.