Vite : serveur de développement instantané et build de production

Sur un projet un peu gros, l'ancienne génération d'outils reconstruisait tout avant d'afficher la première page. Trente secondes d'attente au démarrage, plusieurs secondes après chaque sauvegarde, et l'attention se perd.

Vite est parti d'un constat simple : les navigateurs savent lire les modules ES tout seuls, alors autant leur envoyer les fichiers tels quels.

Définition

Vite est un outil de développement qui combine deux choses : un serveur qui sert vos sources comme Module ES natifs, sans les empaqueter, et une commande de build qui fabrique la version optimisée pour la mise en ligne.

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: { port: 3000 },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

Un projet démarre par npm create vite@latest, qui pose la structure et les dépendances. Les commandes suivantes tiennent en deux scripts : vite pour développer, vite build pour produire le dossier livrable.

Deux modes, deux moteurs

En développement, rien n'est empaqueté. Le navigateur demande les fichiers un par un, Vite les transforme au vol et ne renvoie que celui qui vient de changer. C'est ce qui rend le démarrage indépendant de la taille du projet.

Pour la production, l'inverse s'impose : un Bundler (empaqueteur) regroupe, élague et minifie, parce qu'une centaine de requêtes coûterait bien trop cher au visiteur. Les dépendances installées, elles, sont préparées en amont par un outil rapide, ce qui évite de les retransformer à chaque démarrage.

Trois conventions à connaître

• index.html est le point d'entrée : il vit à la racine du projet, pas dans un dossier de ressources, et c'est lui qui référence le script principal.
• Le dossier public est recopié tel quel : ce qui s'y trouve n'est ni transformé ni renommé, pratique pour un fichier qui doit garder son adresse exacte.
• Les variables d'environnement se préfixent : seules celles qui commencent par VITE_ arrivent dans le navigateur, via import.meta.env. C'est un garde-fou contre la fuite d'une clé secrète dans le code envoyé au client.

Questions fréquentes

Sur un projet neuf, c'est généralement le choix par défaut, pour sa vitesse et sa configuration réduite. Webpack garde sa place sur les applications existantes qui reposent sur un écosystème de greffons construit au fil des années, et une migration se planifie plutôt qu'elle ne s'improvise.

La cause la plus courante est un chemin dont la casse ne correspond pas exactement au nom du fichier. Le système de fichiers d'une machine de développement l'ignore souvent, celui du serveur non. Vérifiez également les fichiers importés dynamiquement par un chemin calculé, que le build ne peut pas deviner.

Pas du tout : il fonctionne aussi bien sans aucune bibliothèque d'interface, et des greffons officiels couvrent les principaux frameworks. Il se trouve simplement que c'est devenu le point de départ habituel des projets React. Notre formation React démarre sur cette base, ce qui évite de perdre une soirée en configuration avant la première ligne de code.