Frontend Academy · Leçon

Vite : serveur de développement et compilation

Démarrez un projet Vite, utilisez son serveur de développement HMR instantané, exécutez la commande de compilation et prévisualisez la sortie de production.

Vite : serveur de développement et compilation est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que Vite ?

Vite est un outil de construction front-end nouvelle génération créé par Evan You, le créateur de Vue. Il fournit un serveur de développement extrêmement rapide grâce à ESM natif et esbuild, ainsi qu'une compilation de production pilotée par Rollup.

Créer un projet Vite

npm create vite@latest crée la structure initiale d'un nouveau projet. Choisissez votre framework (Vanilla, React, Vue, Svelte, Preact ou Lit) et sa variante (JS ou TS). Le projet est immédiatement prêt, sans configuration nécessaire.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Le serveur de développement — démarrage instantané

Vite n'effectue pas de regroupement pendant le développement. Il sert chaque fichier comme module ESM natif. Le navigateur les importe directement. Sans regroupement, le démarrage à froid prend moins de 100 ms, quelle que soit la taille du projet. Seuls les fichiers modifiés sont recompilés lors du HMR.

HMR — remplacement à chaud des modules

Le HMR de Vite remplace uniquement le module modifié dans l'application en cours d'exécution, sans recharger toute la page. Avec React et @vitejs/plugin-react, l'état des composants est conservé pendant le HMR. Les modifications apparaissent en moins de 50 ms.

Les fichiers vite.config.js / vite.config.ts

Vite se configure avec un fichier vite.config.ts. Options courantes : plugins, alias de résolution, port du serveur, proxy pour les appels d'API et répertoire de sortie de la compilation.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Variables d'environnement

Vite expose les variables d'environnement préfixées par VITE_ via import.meta.env. Stockez-les dans .env, .env.development et .env.production. Ne préfixez jamais les secrets par VITE_ : ils sont inclus dans le paquet chargé par le navigateur.

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

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — compilation de production

npm run build utilise Rollup en interne pour regrouper, minifier et élaguer le code inutilisé de l'application. La sortie est placée dans le dossier dist/, prête pour le déploiement.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Analyser le paquet

Utilisez vite-bundle-visualizer ou rollup-plugin-visualizer pour générer une arborescence du contenu du paquet. Cela aide à repérer les dépendances surdimensionnées et les possibilités de chargement différé.

npm run preview

npm run preview sert localement la compilation de production dist/. Utilisez-le pour vérifier la compilation de production avant le déploiement : il détecte les problèmes qui n'apparaissent que lorsque l'application n'est pas en mode développement.

Découpage du code dans Vite

Les instructions import() dynamiques créent automatiquement des fragments distincts. Les routes chargées à la demande de React Router et le composant defineAsyncComponent de Vue déclenchent également un découpage. Vérifiez la taille des fragments dans la sortie de compilation.

Vite pour les bibliothèques

Le mode bibliothèque de Vite (build.lib) compile les bibliothèques npm en produisant les formats ESM et CJS. Indiquez une liste externe pour empêcher l'intégration des dépendances paires comme React.

Vérification rapide

Pourquoi le serveur de développement de Vite est-il plus rapide que celui de webpack ?

Récapitulatif : Vite

npm create vite@latest crée instantanément la structure initiale. Le serveur de développement utilise ESM natif : aucun regroupement et un HMR instantané. vite.config.ts sert à configurer les plugins, les alias et le proxy. Le préfixe VITE_ est réservé aux variables d'environnement pouvant être exposées au navigateur. npm run build produit un paquet Rollup optimisé. npm run preview teste localement la compilation de production.

Questions Fréquemment Posées

La leçon « Vite : serveur de développement et compilation » est-elle gratuite ?

Oui — le texte complet de « Vite : serveur de développement et compilation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Vite : serveur de développement et compilation » ?

Démarrez un projet Vite, utilisez son serveur de développement HMR instantané, exécutez la commande de compilation et prévisualisez la sortie de production. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Vite : serveur de développement et compilation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Modules ES : import, export et import dynamique
npm et package.json : dépendances et scripts
Vite : serveur de développement et compilation
Concepts de regroupement : tree shaking et division du code

← Retour à Frontend Academy