Qu'est-ce que Vite ? Guide en langage simple pour créateurs d'applications

Vite (qui se prononce « viite », un mot français qui signifie « rapide ») est un outil de compilation pour les sites et les applications web. Pendant que vous créez, il fait tourner un serveur de développement qui affiche vos changements dans le navigateur presque instantanément. Au moment de lancer, il regroupe votre code en petits fichiers optimisés que tout hébergeur web peut servir. Il est gratuit, libre, et c'est l'outil par défaut derrière de nombreux projets React, Vue et Svelte.

Pourquoi Vite est important quand on construit avec l'IA

Vous ne taperez peut-être jamais une commande Vite, mais si votre application a été créée avec un outil de création IA, Vite la fait probablement tourner. Mythex démarre les nouveaux projets avec Vite + React + TypeScript + Tailwind, sauf si vous demandez autre chose (comment la technologie est choisie).

Savoir ce que fait Vite vous aide à :

• Comprendre l'aperçu. L'aperçu en direct, qui se met à jour pendant que l'IA modifie les fichiers, est généralement un serveur de développement Vite.
• Comprendre la mise en ligne. Une application Vite devient un dossier de fichiers statiques (HTML, JavaScript, CSS et images), ce qui est peu coûteux et simple à héberger.
• Lire les messages d'erreur. Lorsque l'aperçu affiche une superposition d'erreur rouge ou une page blanche, c'est souvent Vite qui signale qu'un fichier n'a pas pu être compilé.
• Connaître ses limites. Vite compile l'interface. Si votre application a besoin d'un backend (une base de données, des clés d'API secrètes, des paiements), celui-ci s'exécute ailleurs. Voir interface et backend.

Une analogie du quotidien

Pensez à la cuisine d'un restaurant.

• Pendant la préparation du service (développement), le chef goûte et ajuste chaque plat au fur et à mesure. Il change l'assaisonnement et goûte à nouveau une seconde plus tard. C'est le serveur de développement de Vite : vous modifiez un fichier, la page se met à jour aussitôt, souvent sans même perdre ce que vous aviez saisi dans un formulaire.
• Pour une commande de traiteur (production), tout est cuit, portionné, emballé et étiqueté pour bien voyager et pouvoir être servi n'importe où. C'est ce que fait vite build : votre code est regroupé, réduit et doté de noms de fichiers uniques, prêts pour n'importe quel hébergeur.

Les mêmes recettes, deux façons très différentes de les préparer, et Vite fait les deux.

Ce que fait réellement Vite

Une application web moderne est composée de nombreux fichiers : composants, styles, images et bibliothèques tierces. Les navigateurs ne peuvent pas utiliser tout cela tel quel. Le TypeScript doit devenir du JavaScript, le JSX de React doit être transformé, et les classes Tailwind doivent devenir du CSS.

Vite gère cela selon deux modes :

Les anciens outils regroupaient toute l'application avant d'afficher quoi que ce soit ; démarrer ou mettre à jour un grand projet pouvait donc prendre beaucoup de temps. L'astuce de Vite consiste à éviter cette étape pendant le développement et à laisser le navigateur charger les fichiers au besoin. Pour la production, il regroupe encore le code, avec un moteur de regroupement appelé Rolldown depuis Vite 8, car de nombreux petits fichiers sont plus lents pour les visiteurs que quelques fichiers optimisés.

Exemple concret : le contenu d'un projet Vite

Voici à peu près à quoi ressemble une petite application Vite + React :

my-app/
  index.html          ← la seule page HTML à partir de laquelle l'application démarre
  package.json        ← liste des bibliothèques et des scripts (dev, build)
  vite.config.ts      ← réglages et extensions de Vite
  src/
    main.tsx          ← démarre React et l'insère dans index.html
    App.tsx           ← le composant principal de votre application
    index.css         ← styles, par ex. @import "tailwindcss";
  public/             ← fichiers copiés tels quels (favicon, robots.txt)

Et les scripts dans package.json :

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Suivons maintenant un seul changement :

1. Vous demandez à l'IA de « rendre le titre bleu ».
2. Elle modifie une classe dans App.tsx.
3. Vite remarque que le fichier a changé, transforme ce seul fichier et envoie la mise à jour au navigateur.
4. Le titre devient bleu dans l'aperçu, habituellement en moins d'une seconde.

Lorsque vous publiez, vite build produit quelque chose comme dist/index.html et dist/assets/index-a1b2c3.js. La partie qui semble aléatoire dans le nom du fichier change chaque fois que le contenu change ; ainsi, les navigateurs et les réseaux de diffusion de contenu (CDN) peuvent mettre les fichiers en cache longtemps sans servir un code périmé.

Variables d'environnement dans Vite

Vite n'expose au code du navigateur que les variables dont le nom commence par VITE_, par exemple VITE_PUBLIC_MAP_ID. C'est une mesure de sécurité : tout ce qui se trouve dans le code du navigateur peut être vu par les visiteurs. Les clés secrètes ne doivent donc jamais avoir ce préfixe et doivent rester sur un backend. Voir les variables d'environnement et les secrets.

Termes clés

Idées reçues courantes

• « Vite est un cadre de travail. » C'est un outil de compilation. React, Vue ou Svelte est le cadre ; Vite le fait tourner et le prépare.
• « Une application Vite comprend un backend. » Une application Vite standard ne comprend que l'interface. Les bases de données, les connexions et les clés secrètes ont besoin d'un serveur ou d'une API à côté.
• « Le serveur de développement peut être mis en ligne. » Il n'est pas conçu pour un trafic réel. Publiez toujours le résultat de la compilation de production.
• « Tout ce qui se trouve dans .env est secret. » Dans une application Vite, les variables VITE_ sont intégrées aux fichiers que chaque visiteur télécharge.
• « Une page 404 après un rafraîchissement signifie que l'application est cassée. » Dans une application monopage, l'hébergeur doit renvoyer chaque route vers index.html. C'est un réglage d'hébergement : voir comment corriger les erreurs 404 après la mise en ligne.

Quoi demander à votre outil IA

• « Cette application est-elle uniquement Vite (interface), ou a-t-elle aussi un backend ? Où s'exécute chaque partie ? »
• « Lance la compilation de production et corrige toutes les erreurs et tous les avertissements avant que je publie. »
• « Vérifie qu'aucune clé secrète ne se trouve dans des variables VITE_ ou ailleurs dans le code de l'interface. »
• « L'aperçu affiche une page blanche : vérifie les erreurs de la console Vite et du navigateur, puis corrige la cause. » Voir comment corriger une page blanche.
• « Assure-toi qu'un rafraîchissement sur n'importe quelle adresse de page fonctionne après la publication, et pas seulement sur la page d'accueil. »

Vite dans Mythex

Chaque nouveau projet Mythex démarre sur Vite, sauf si vous demandez Next.js, du HTML statique ou un autre backend. L'aperçu en direct, dans votre bac à sable privé, se met à jour pendant que l'agent modifie les fichiers, et la publication compile l'application et la déploie : vous n'avez rien à configurer vous-même. Si vous avez besoin plus tard d'une API ou d'une base de données, demandez-le dans le clavardage : Mythex peut ajouter un service backend à côté de l'interface Vite (applications multiservices).

Questions