Aller au contenu principal

Vite.js

Notions théoriques​

Qu'est-ce que Vite ?​

Vite est un outil de build moderne pour les applications Web.

Son objectif principal est d'offrir une expérience de développement ultra-rapide grâce à un démarrage instantané et un rechargement à chaud.

Vite (en français) Outil Frontend de nouvelle génération : https://vitejs.fr/

Pourquoi utiliser Vite ?​

Contrairement aux outils traditionnels comme Webpack, Vite propose :

  • Un démarrage quasi-instantané grâce à l'utilisation des ES Modules natifs du navigateur.
  • Un rechargement à chaud ultra-rapide, en anglais Hot Module Replacement (HMR), permettant de voir les modifications en temps réel sans recompiler tout le projet.
  • Une configuration minimale avec un support natif pour TypeScript, Vue, React et d'autres frameworks.
  • Une optimisation automatique du build final avec Rollup.

Comment fonctionne Vite ?​

Vite se compose de deux parties principales :

  1. Un serveur de développement qui sert les fichiers directement sous forme de modules ES natifs.
  2. Un outil de build basé sur Rollup pour générer un bundle optimisé pour la production.

Comparaison avec Webpack​

FonctionnalitéViteWebpack
Temps de démarrageTrès rapideLent (compilation initiale)
Rechargement à chaudInstantanéPeut être lent
ConfigurationMinimeSouvent complexe
Support natif ES ModulesOuiNon

Installation de Vite​

Pour commencer avec Vite, il suffit d'installer Node.js et d'exécuter la commande suivante :

npm create vite@latest mon-projet

Exemple pratique​

Nous allons :

  • créer une application React avec Vite
  • et voir comment fonctionne le rechargement à chaud.

Étape 1 : Création du projet​

Dans votre terminal, exécutez :

npm create vite@latest mon-projet --template react
cd mon-projet
npm install
npm run dev

Cela démarre un serveur local et ouvre votre application dans le navigateur.

Étape 2 : Modification en direct​

Ouvrez src/App.jsx et modifiez le texte affiché :

function App() {
  return (
    <div>
      <h1>Bienvenue sur mon projet Vite !</h1>
    </div>
  );
}

export default App;

Dès que vous enregistrez, le navigateur mettra à jour l'affichage sans recharger la page.

Étape 3 : Build pour la production​

Pour générer un build optimisé :

npm run build

Le dossier dist/ contient les fichiers prêts pour la mise en ligne.

Test de mémorisation/compréhension​


Quel est l'objectif principal de Vite ?


Pourquoi Vite est-il plus rapide que Webpack au démarrage ?


Quel outil Vite utilise-t-il pour le build final ?


Quelle commande permet de créer un projet Vite ?


Que signifie HMR dans Vite ?


Quel dossier contient les fichiers optimisés après un build avec Vite ?


Quelle commande permet de démarrer le serveur de développement Vite ?


Comment Vite optimise-t-il les performances en production ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez :

  1. Créer un projet Vite avec React.
  2. Modifier le composant App.jsx pour afficher un message personnalisé.
  3. Ajouter un bouton qui change dynamiquement le texte affiché.
  4. Tester le rechargement à chaud.
  5. Générer un build pour la production.

Étape 1 : Création du projet​

  1. Dans votre répertoire "Documents" créez le répertoire tp_vite_js et ouvrez un terminal.

  2. Pour créer un projet Vite, exécutez la commande :

    npm create vite@latest mon-projet

  3. Choisissez le template React et le variant TypeScript.

  4. Puis, exécutez les commandes suivantes :

    cd mon-projet
    npm install
    npm run dev

  5. Enfin, ouvrez votre navigateur à l'adresse http://localhost:3000 pour voir votre projet.

Étape 2 : Modification du composant App.jsx​

Modifiez src/App.jsx pour afficher un message personnalisé :

function App() {
  return (
    <div>
      <h1>Bienvenue sur mon projet React avec Vite !</h1>
    </div>
  );
}

export default App;

Étape 3 : Ajout d'un bouton interactif​

Ajoutez un état local pour changer dynamiquement le texte :

import { useState } from "react";

function App() {
  const [message, setMessage] = useState("Bienvenue sur mon projet Vite !");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Texte modifié !")}>
        Changer le texte
      </button>
    </div>
  );
}

export default App;

Étape 4 : Tester le rechargement à chaud​

Modifiez le texte dans App.jsx et observez la mise à jour instantanée.

Étape 5 : Générer un build optimisé​

Exécutez :

npm run build

Le dossier dist/ contient les fichiers prêts pour la mise en ligne.

Le TP est réussi si :

  • Le projet est bien créé avec Vite.
  • Le texte s'affiche correctement.
  • Le bouton modifie dynamiquement le texte.
  • Le build est généré sans erreur.