Migration de l'application Create React vers Vite : guide du développeur

Migration de l'application Create React vers Vite : guide du développeur

Salut, amis développeurs ! ?

Récemment, j'ai relevé le défi de migrer une application de production React de Create React App (CRA) vers Vite. Les résultats? Nos temps de construction ont chuté de 3 minutes à seulement 20 secondes ! ?

Dans ce guide, je vous guiderai tout au long du processus de migration, y compris un conseil crucial sur la gestion de JSX dans les fichiers JavaScript qui pourrait vous faire économiser des heures de débogage.

? Pourquoi passer à Vite ?

Avant de plonger dans les détails techniques, voyons pourquoi vous pourriez vouloir effectuer ce changement. Notre équipe a constaté des améliorations impressionnantes :

Metric	Before (CRA)	After (Vite)
Dev Server Startup	30s	2s
Hot Module Replacement	2-3s
Production Build	3 min	20s
Bundle Size	100%	85%

De plus, vous bénéficiez de ces fonctionnalités géniales :

• ⚡️ HMR ultra-rapide
• ? Pas de regroupement en développement
• ? Configuration plus simple
• ? De meilleurs messages d'erreur
• ? Prise en charge native de TypeScript

? Étapes de migration

1. Préparez votre projet

Tout d'abord, créez une nouvelle branche :

git checkout -b feature/migrate-to-vite

2. Mettre à jour les dépendances

Supprimez CRA et ajoutez Vite :

# Remove CRA dependencies
npm uninstall react-scripts @craco/craco

# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react

3. Configurer Vite

Créez vite.config.js à la racine de votre projet :

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

export default defineConfig({
  plugins: [
    react({
      // ? Key configuration for .js files with JSX
      include: "**/*.{jsx,js}",
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'build',
    sourcemap: true,
  },
});

Important : La configuration include : "**/*.{jsx,js}" est cruciale ! Sans cela, Vite ne traite JSX que dans les fichiers .jsx.

4. Variables d'environnement

Vite gère les variables d'environnement différemment :

1. Conservez vos fichiers .env
2. Renommer les variables de REACT_APP_ en VITE_
3. Mettre à jour les références :

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

5. Mettre à jour les scripts du package

Remplacer les scripts dans package.json :

{
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "lint": "eslint src --ext .js,.jsx"
  }
}

6. Déplacez index.html

1. Déplacez public/index.html vers la racine
2. Mettez-le à jour :

  
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App Name</title>
  
  
    <div>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

2. Importations absolues

Mettre à jour vite.config.js :

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

3. Prise en charge SVG

Installer et configurer vite-plugin-svgr :

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  // ...
});

✅ Liste de contrôle de migration

Avant de vous engager :

• [ ] Le serveur de développement démarre
• [ ] Le remplacement du module chaud fonctionne
• [ ] Les variables d'environnement sont accessibles
• [ ] Le processus de construction réussit
• [ ] Les chemins d'importation sont résolus correctement
• [ ] Chargement du SVG et des actifs
• [ ] Les modules CSS fonctionnent

? Conclusion

Bien que la migration de CRA vers Vite puisse sembler intimidante, les gains de performances en valent la peine. N'oubliez pas :

1. Configurez le traitement JSX pour les fichiers .js dès le début
2. Mettre à jour les variables d'environnement
3. Vérifier les chemins d'importation
4. Testez minutieusement

Avez-vous migré votre application React vers Vite ? À quels défis avez-vous été confronté ? Partagez vos expériences dans les commentaires !

---

Vous avez trouvé cela utile ? Suivez-moi pour plus de conseils React et JavaScript !

Je répondrai activement aux commentaires et aux questions. Faites-moi savoir si vous avez besoin d'éclaircissements sur le processus de migration !