Vite : système de plugins et mode SSR
Écrivez un plugin Vite avec des hooks transform et load, intégrez des plugins tiers et configurez Vite pour le rendu côté serveur avec l’option ssrBuild.
Vite : système de plugins et mode SSR est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Pourquoi Vite s’est imposé
Vite (qui signifie « rapide » en français) a été créé par Evan You. En développement, il sert les fichiers source sans les regrouper, via les modules ES natifs : le démarrage à froid est instantané. En production, il utilise Rollup pour le regroupement. L’expérience de développement est considérablement plus rapide qu’avec Webpack.
Fonctionnement du serveur de développement de Vite
Les navigateurs modernes prennent nativement en charge les modules ES. Vite sert vos fichiers source tels quels et transforme TypeScript/JSX à la demande. Sans regroupement, vous n’attendez pas lors des démarrages à froid.
Remplacement à chaud des modules
HMR remplace les modules sans recharger la page. Le HMR de Vite repose sur ESM et est bien plus rapide que celui de Webpack. La plupart des frameworks (React, Vue, Svelte) s’y intègrent pour mettre à jour les composants tout en préservant leur état.
Bases de la configuration de Vite
Configurez Vite via 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()],
server: { port: 5173 },
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom']
}
}
}
}
});Le système de plugins
Les plugins Vite étendent les plugins Rollup et ajoutent des hooks pour le serveur de développement. Un plugin est un objet (ou une fonction qui en renvoie un) doté de hooks nommés.
// myPlugin.ts
export default function myPlugin() {
return {
name: 'my-plugin',
transform(code, id) {
if (!id.endsWith('.mdx')) return null;
// transform MDX to JS:
return { code: compileMdx(code), map: null };
},
handleHotUpdate(ctx) {
// react to file changes
}
};
}
// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };Hooks principaux
transform(code, id) : modifie le contenu d’un fichier (par exemple, compile du MDX ou injecte l’environnement). load(id) : fournit le contenu des modules virtuels. resolveId(source) : personnalise la résolution des modules. configureServer(server) : ajoute un middleware au serveur de développement.
Plugins populaires
@vitejs/plugin-react (React et actualisation rapide). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importe les SVG en tant que composants). vite-plugin-checker (TypeScript et ESLint dans une superposition). vite-plugin-mkcert (HTTPS local).
Mode SSR de Vite
Vite prend en charge le rendu côté serveur avec des primitives de bas niveau. Des frameworks comme Nuxt, SvelteKit, Remix et Astro s’appuient dessus. Pour un SSR personnalisé, suivez le guide SSR de Vite.
// server.ts
import { createServer } from 'vite';
const vite = await createServer({
server: { middlewareMode: true },
appType: 'custom'
});
express()
.use(vite.middlewares)
.use('*', async (req, res) => {
const url = req.originalUrl;
let template = await readFile('index.html', 'utf-8');
template = await vite.transformIndexHtml(url, template);
const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
const appHtml = await render(url);
res.send(template.replace('<!--app-html-->', appHtml));
});Compiler pour le SSR
Deux compilations sont nécessaires : client et serveur. vite build --ssr entry-server.ts produit le paquet serveur.
// package.json
"scripts": {
"build:client": "vite build",
"build:server": "vite build --ssr src/entry-server.ts",
"build": "npm run build:client && npm run build:server"
}Variables d’environnement
import.meta.env.MODE vaut « développement » ou « production ». Les variables personnalisées préfixées par VITE_ sont exposées.
Gestion du CSS
Vite gère le CSS, les modules CSS (foo.module.css), PostCSS (détecte automatiquement postcss.config.js) et les préprocesseurs CSS (Sass, Less, Stylus) sans configuration supplémentaire. Injectez le CSS critique via des plugins.
Vite contre Webpack et Turbopack
Vite : développement natif ESM, compilations Rollup et vaste écosystème. Webpack : outil historique imposant, plus configurable et plus lent. Turbopack (Vercel) : basé sur Rust, compatible avec Webpack et actuellement intégré à Next. Pour les nouveaux projets : Vite pour les applications monopages, Next/Turbopack pour les projets spécifiques à Next.
Vérification rapide
Pourquoi le démarrage à froid du serveur de développement de Vite est-il beaucoup plus rapide que celui de Webpack ?
Récapitulatif : Vite
Serveur de développement basé sur ESM : démarrage à froid instantané et HMR rapide. La production utilise Rollup. Les plugins étendent les hooks de Rollup (transform, load, resolveId) ainsi que les hooks propres à Vite (configureServer, handleHotUpdate). Mode SSR via createServer et middlewareMode ; compilation avec --ssr. Plugins PWA, MDX, SVGR et mkcert. import.meta.env pour les variables d’environnement. Modules CSS, PostCSS et préprocesseurs intégrés.
Questions Fréquemment Posées
La leçon « Vite : système de plugins et mode SSR » est-elle gratuite ?
Oui — le texte complet de « Vite : système de plugins et mode SSR » 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 : système de plugins et mode SSR » ?
Écrivez un plugin Vite avec des hooks transform et load, intégrez des plugins tiers et configurez Vite pour le rendu côté serveur avec l’option ssrBuild. 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 1 sur 4.
Combien de temps prend la leçon « Vite : système de plugins et mode SSR » ?
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
- Vite : système de plugins et mode SSR
- esbuild : rapidité et limites
- Espaces de travail pnpm pour les monorepos
- Turbo : mise en cache et pipelines de tâches