Migration de Create-React-App vers Vite : amélioration des performances dans les applications héritées

Je suis ravi de partager que nous réussissons la transition de create-react-app (CRA) à Vite sur mon lieu de travail ! ?

Changer n’était pas simple, mais c’était nécessaire. Notre application devenait de plus en plus lente et l'expérience du développeur (DX) se détériorait. Je me suis retrouvé à laisser mon ordinateur portable allumé toute la journée car le redémarrage de l'application était extrêmement lent. Si vous avez déjà supprimé node_modules, les avez réinstallés et tenté de démarrer l'application, vous pourriez perdre une heure à attendre que tout soit téléchargé et redémarré. L'application prend généralement 12 à 15 minutes pour démarrer, ce qui représente un retard important, en particulier lorsqu'il s'agit de rapports de bogues urgents. De plus, CRA est obsolète et n'est plus recommandé pour le démarrage des applications React.

Pourquoi Vite ?

Au départ, j'ai envisagé d'utiliser Rspack, qui est présenté comme

Un remplacement instantané du webpack, avec des fonctionnalités plus puissantes et une productivité exceptionnelle.

Cependant, la transition n’a pas été aussi fluide que je l’avais espéré. Bien que Rspack soit sur le point d'être prêt pour la production (dans la version 1.0.0-beta.4 au moment d'écrire ces lignes), j'ai décidé d'opter pour la solution la plus mature et éprouvée : Vite.

S'éloigner de Webpack et de CRA m'a donné une nouvelle appréciation de ces outils et des efforts qui les sous-tendent. Ils simplifient grandement le processus de développement et fournissent une configuration prête à l'emploi.

J'espère qu'un jour nous aurons un véritable remplacement instantané pour CRA et Webpack, nous n'aurons donc pas besoin d'apporter des modifications importantes aux fichiers lors du passage à des outils comme Vite.

Si vous n'avez aucune idée de ce que sont Webpack, Vite ou Rspack, je suis descendu dans ce terrier de lapin dans mon dernier article, j'ai exploré Webpack et ce qu'il fait. Vite et Rspack sont des outils plus modernes faisant un travail similaire mais plus efficaces.

Mon expérience avec Vite : avantages et inconvénients

Avant de découvrir comment j'ai fait la transition de notre ancienne application vers Vite, j'aimerais partager les avantages et les inconvénients que j'ai rencontrés au cours de ma brève expérience d'utilisation de Vite dans un environnement de développement et de production.

Avantages :

• Démarrage plus rapide : Après une nouvelle installation, le temps de démarrage de notre serveur a été considérablement réduit. Avec Webpack, cela prenait jusqu'à 30 minutes ; avec Vite, cela prend désormais environ 8,5 minutes. Les démarrages suivants sont passés de 12 à 15 minutes à seulement 1,5 minute. Même si cela peut paraître encore lent, c'est une victoire compte tenu de la complexité de notre projet.

Remarque : L'ordinateur portable sur lequel je teste est assez ancien. Sur une machine plus récente avec de meilleures spécifications, les temps de démarrage étaient aussi courts que 20 à 30 secondes pour le deuxième démarrage.

• Temps de construction plus rapide : Le temps de construction de notre workflow GitHub est passé de 12 à 13 minutes à seulement 7 minutes , soit presque la moitié du temps ! Cette transition fait gagner à notre équipe de développement au moins 20 minutes par développeur chaque jour.

Avec Webpack

Avec Vite

Inconvénients :

• Différents bundles pour le développement et la production : Vite utilise esbuild pour le développement et Rollup pour la production, ce qui a été un problème important. Certaines pages fonctionnaient parfaitement en développement mais plantaient en production. Cet écart a nécessité des tests et un dépannage manuels, même s'il n'y a pas eu beaucoup de problèmes dans l'ensemble.

Planifier la transition : comment migrer de CRA vers Vite

Faites vos recherches :

C’est l’étape la plus cruciale. Des recherches approfondies sont essentielles. J'ai parcouru Reddit pour en savoir plus sur les expériences d'autres développeurs passant de CRA à Vite. La plupart conviennent que le processus est délicat mais que l’effort en vaut la peine. De plus, j'ai lu plusieurs articles de blog sur les étapes nécessaires pour déplacer une application CRA vers Vite, car il n'existe actuellement aucun didacticiel ou documentation officiel sur ce sujet.

Construisez votre plan d'action :

• Convertir les fichiers .js en .jsx : C'était un défi surprenant, car Vite ne prend pas en charge les fichiers .js comme le fait Webpack. La conversion manuelle de tous les fichiers .js en .jsx était hors de question, mais heureusement, j'ai trouvé un outil CLI qui automatisait le processus.
• Supprimer react-script, installer vite, créer vite.config.js : Assurez-vous que vous utilisez une version de Vite compatible avec votre version de Node.js. Après cela, supprimez les scripts de réaction, installez vite et créez le fichier vite.config.js.

yarn remove react-scripts
yarn add vite @vitejs/plugin-react --dev

et à la racine du projet

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

export default defineConfig({
    plugins: [react()],
    build: { // to output your build into build dir the same as Webpack
        outDir: 'build',
    },
    server: {
        open: true,
        port: 3000,
    },
});

• Déplacez index.html vers la racine du projet et les polices vers le répertoire public, puis mettez à jour les chemins de référence vers les polices en conséquence.
• Supprimer %PUBLIC_URL% des liens dans index.html.

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> ❌ 
<link rel="icon" href="/favicon.ico" /> ✅

• Ajoutez un script pointant vers le point d'entrée de votre projet dans index.html

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script type="module" src="/src/index.jsx"></script>
</body>

• Remplacer les variables d'environnement : Remplacez REACT_APP par VITE dans .env, mettez à jour process.env.NODE_ENV avec import.meta.env.MODE et process.env.REACT_APP avec import.meta.env.VITE dans votre code.
• Configurer eslint : Installez vite-plugin-eslint et mettez à jour vite.config.js pour inclure le plugin.

yarn add vite-plugin-eslint --dev

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

export default defineConfig({
    plugins: [react(), eslintPlugin()],
    build: {
        outDir: 'build',
    },
    server: {
        open: true,
        port: 3000,
    },
});

• Revalidez vos workflows GitHub : Mettez à jour toutes les étapes du flux de travail qui font référence aux scripts de réaction pour utiliser vite.

Résoudre les problèmes spécifiques à l'environnement :

1. Tout modifier exiger les images pour moduler les importations.

• Problème : Dans CRA, les images étaient généralement chargées à l'aide d'instructions require, qui ne fonctionneraient pas avec Vite.
• Solution : Remplacez require par les importations de modules ES. Par exemple:

<img src={require('assets/images/logo.svg')}/> ❌

import Logo from 'assets/images/logo.svg'; 

<img src={Logo}/> ✅

2. Résoudre globalCeci n'est pas défini.

• Problème : Vite ne fournit pas automatiquement globalThis, ce qui peut causer des problèmes si votre code en dépend, Webpack le polyfillait pour nous.

Variable globale « globalThis » dans une application Webpack

• Solution : Ajoutez une définition manuelle pour globalThis dans votre fichier index.jsx

window.global ||= window;
// just double checked my code and I'm a bit skeptical of why I'm not using
// `window.globalThis`and why my code is working with `window.global` ?

3. Générez des cartes sources pour la surveillance des erreurs.

• Problème : Par défaut, Vite peut ne pas générer de cartes sources, qui sont essentielles au débogage lorsque vous utilisez un outil de surveillance des erreurs.
• Solution : Activez les cartes sources dans votre vite.config.js :

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

export default defineConfig({
    plugins: [react(), eslintPlugin()],
    build: {
        outDir: 'build',
        sourcemap: true,
    },
    server: {
        open: true,
        port: 3000,
    },
});

4. Corrigez les variables SASS globales.

• Problème : Vite peut ne pas gérer les variables SASS globales définies avec :export comme le fait CRA.
• Solution : Déplacez les variables SASS globales vers un fichier JavaScript. Par exemple:

//theme.scss ❌

:export { 
    primaryColor: $app-primary;
    secondaryColor: $secondary;
     ....
}

import theme from '../styles/theme.scss';

<div style={{ color: theme.primaryColor }}>Hello World</div>

Sera remplacé par

// theme.js ✅

const theme = { 
    primaryColor: '#10142a',
    secondaryColor: '#2695a2',
    .....
}

export default theme;

import theme from '../styles/theme.js';

<div style={{ color: theme.primaryColor }}>Hello World</div>

5. Gérez les importations absolues pour les fichiers .jsx.

• Problème : Les importations absolues peuvent ne pas fonctionner correctement dans Vite.
• Solution : Configurez les alias dans vite.config.js :

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

export default defineConfig({
    plugins: [react(), eslintPlugin()],
    build: {
        outDir: 'build',
        sourcemap: true,
    },
    resolve: {
        alias: [
            { find: 'actions', replacement: '/src/actions' },
            { find: 'assets', replacement: '/src/assets' },
            { find: 'components', replacement: '/src/components' },
            .....
            { find: 'styles', replacement: '/src/styles' }, 
        ],
    },
    server: {
        open: true,
        port: 3000,
    },
});

6. Gérer les importations absolues pour les fichiers **.scss.**

• Problème : Vite peut ne pas résoudre correctement les importations absolues de fichiers SCSS dans l'environnement de production, par exemple, le code ci-dessous importait un fichier appelé app.[hash].js (ne faisant pas partie de ma build) à la place de app.[hash].css en production

import MyComponent from 'components/MyComponent';
import styles from 'styles/app.scss';

<MyComponent className={styles.someClassName} />

• Solution : J'ai essayé de revenir au chemin relatif du fichier mais cela n'a pas fonctionné ?‍♂️, j'ai choisi d'importer des fichiers SCSS globalement puisque ces classes étaient partagées via l'application

// index.jsx
import React from 'react';
import { render } from 'react-dom';
import Main from './pages/Main';

// Import SCSS globally
import './global.scss';

render(<Main/>, document.querySelector('#root'));

// global.scss

.class1{...}
.class2{...}

...

// cut & paste classes from styles/app.scss here 
// then drop that cursed file

alors je les utiliserais comme du CSS vanille

<MyComponent className='someClassName' />

7. Résolvez les problèmes de bibliothèques tierces.

• Problème : Certaines bibliothèques peuvent ne pas être entièrement compatibles avec Vite.
• Solution : Mettre à jour ou remplacer les bibliothèques incompatibles. Dans mon cas, je devais :  — Remplacez jsonwebtoken par jsonwebtoken-esm  — Remplacez les notifications de réaction par réagir-toastify  — Utilisez des lodash-es au lieu de lodash  — Mettre à jour les bibliothèques comme React-bootstrap-sweetalert et recharts vers leurs dernières versions

Conclusion

La transition de create-react-app à Vite a été une expérience difficile mais enrichissante. Les améliorations de performances à elles seules en valent la peine, et je pense que cela augmentera considérablement à la fois la productivité des développeurs et la maintenabilité globale du projet. En traitant soigneusement ces problèmes, vous pouvez tirer le meilleur parti des outils modernes de Vite et améliorer l'efficacité de votre flux de travail de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!