Skip to content
Learni
View all tutorials
Outils Frontend

Comment configurer Vite avec React et TypeScript en 2026

14 minINTERMEDIATE
ReactTypeScriptVite

Introduction

Vite s'est imposé comme l'outil de build frontend le plus rapide du marché. En 2026, il reste le choix privilégié pour les projets React TypeScript grâce à son serveur de développement instantané et son bundling optimisé. Ce tutoriel intermédiaire vous guide pas à pas pour créer une configuration professionnelle, incluant TypeScript strict, plugins essentiels et optimisations de production. Vous apprendrez à structurer un projet scalable et à éviter les pièges courants des configurations avancées.

Prérequis

  • Node.js 20+
  • Connaissances de base en React et TypeScript
  • npm ou pnpm installé

Initialisation du projet

terminal
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Cette commande crée un projet Vite avec le template React TypeScript officiel. Elle installe les dépendances de base nécessaires pour démarrer rapidement.

Configuration TypeScript stricte

Activez les options strictes de TypeScript pour une meilleure sécurité de type dans votre application.

Configuration TypeScript avancée

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Ce fichier active le mode strict et les options modernes de TypeScript adaptées à Vite. Cela évite les erreurs silencieuses en production.

Configuration Vite principale

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true
  },
  build: {
    target: 'es2022',
    minify: 'esbuild',
    sourcemap: true
  }
})

Le fichier de configuration active le plugin React et définit des options de build optimisées pour la production avec support ES2022.

Ajout du plugin de compression

terminal
npm install -D vite-plugin-compression

Ce plugin ajoute la compression gzip et brotli automatique lors du build pour réduire la taille des assets.

Mise à jour de la config avec compression

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import compression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    react(),
    compression({ algorithm: 'gzip' }),
    compression({ algorithm: 'brotliCompress', ext: '.br' })
  ],
  build: {
    target: 'es2022',
    minify: 'esbuild'
  }
})

Ajoutez les deux instances de compression pour générer des fichiers .gz et .br, améliorant les performances de chargement.

Bonnes pratiques

  • Utilisez toujours des alias pour les imports (@/src)
  • Activez sourcemap en production pour le debugging
  • Configurez des variables d'environnement via .env
  • Testez le build avec vite build --mode staging

Erreurs courantes à éviter

  • Oublier d'installer les types TypeScript pour les plugins
  • Utiliser des chemins relatifs au lieu d'alias
  • Ignorer les warnings de dépendances optimisées
  • Ne pas configurer correctement le target ES pour les navigateurs cibles

Pour aller plus loin

Découvrez nos formations Learni sur les outils de build modernes et l'optimisation frontend.