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’a pas été 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, j'ai parcouru 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 — 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.

Build Your Action Plan:

• Convert .js files to .jsx:This was a surprising challenge, as Vite doesn't support .js files as Webpack does. Manually converting all .js files to .jsx was out of the question, but luckily, I found a CLI tool that automated the process.
• Removereact-script, installvite, createvite.config.js:Ensure you're using a Vite version compatible with your Node.js version. After that, remove react-scripts, install vite, and create the vite.config.js file.

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

and in the project root

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, }, });

• Moveindex.html to the project root and fonts to the public directory then update reference paths to the fonts accordingly.
• Remove%PUBLIC_URL% from links inindex.html.

 ❌  ✅

• Add Script pointing at your project entry point inindex.html

• Replace environment variables:Replace REACT_APP with VITE in .env , update process.env.NODE_ENV with import.meta.env.MODE and process.env.REACT_APP with import.meta.env.VITE in your code.
• Configureeslint:Install vite-plugin-eslint and update vite.config.js to include the 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, }, });

• Revalidate your GitHub workflows:Update any workflow steps that reference react-scripts to use vite.

Fix Environment-Specific Issues:

1. Change allrequire images to module imports.

• Issue:In CRA, images were commonly loaded using require statements, which won’t work with Vite.
• Solution:Replace require with ES module imports. For instance:

 ❌

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

2. ResolveglobalThis is not defined.

• Issue:Vite doesn’t automatically provide globalThis, which can cause issues if your code relies on it, Webpack was polyfilling it for us.

global variable “globalThis” in a Webpack application

• Solution:Add a manual definition for globalThis in your index.jsx file

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. Generate source maps for error monitoring.

• Issue:By default, Vite may not generate source maps, which are essential for debugging when you use an error monitoring tool.
• Solution:Enable source maps in your 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. Fix global SASS variables.

• Issue:Vite may not handle global SASS variables defined with :export as CRA does.
• Solution:Move global SASS variables to a JavaScript file. For example:

//theme.scss ❌ :export { primaryColor: $app-primary; secondaryColor: $secondary; .... } import theme from '../styles/theme.scss'; 
Hello World

Will be replaced by

// theme.js ✅ const theme = { primaryColor: '#10142a', secondaryColor: '#2695a2', ..... } export default theme; import theme from '../styles/theme.js'; 
Hello World

5. Handle absolute imports for .jsx files.

• Issue:Absolute imports might not work properly in Vite.
• Solution:Configure aliases in 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. Handle absolute imports for **.scss files.**

• Issue:Vite might not resolve absolute imports for SCSS files correctly in the production environment, for example, The code below was importing a file called app.[hash].js (not a part of my build) instead of app.[hash].css in production

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

• Solution:I tried falling back to the relative path of the file but it didn’t work ?♂️, I opted into import SCSS files globally since these classes were shared through the application

// index.jsx import React from 'react'; import { render } from 'react-dom'; import Main from './pages/Main'; // Import SCSS globally import './global.scss'; render(
, document.querySelector('#root')); // global.scss .class1{...} .class2{...} ... // cut & paste classes from styles/app.scss here // then drop that cursed file

then I’d use them like vanilla CSS

7. Address third-party library issues.

• Issue:Some libraries may not be fully compatible with Vite.
• Solution:Update or replace incompatible libraries. In my case, I needed to:  — Replace jsonwebtoken with jsonwebtoken-esm  — Replace react-notifications with react-toastify  — Use lodash-es instead of lodash  — Update libraries like react-bootstrap-sweetalert and recharts to their latest versions

Conclusion

Transitioning from create-react-app to Vite has been a challenging but rewarding experience. The performance improvements alone have made the effort worthwhile, and I believe this will significantly boost both developer productivity and overall project maintainability. By carefully addressing these issues, you can make the most of Vite’s modern tooling and improve the efficiency of your development workflow.

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!