从 Create-React-App 迁移到 Vite：提升旧应用程序的性能

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.

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.
• Supprimezreact-script, installezvite, créezvite.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éplacezindex.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 dansindex.html.

 ❌  ✅

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

• 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.
• Configurereslint :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. Changez toutexigez 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:

 ❌

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

2. ResolveglobalCeci 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'; 
Hello World

Sera remplacé par

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

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érez les importations absolues pour les fichiers **.scss.**

• Problème :Vite peut ne pas résoudre correctement les importations absolues pour les 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) au lieu de app.[ hash].css en production

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

• 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(
, 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

7. Résolvez les problèmes de bibliothèque tierce.

• 问题：部分库可能与 Vite 不完全兼容。
• 解决方案：更新或替换不兼容的库。就我而言，我需要：  — 将 jsonwebtoken 替换为 jsonwebtoken-esm  — 用react-toastify替换react-notifications  — 使用lodash-es代替lodash  — 将react-bootstrap-sweetalert和recharts等库更新到最新版本

结论

从 create-react-app 过渡到 Vite 是一次充满挑战但又有益的经历。仅性能的改进就足以让这些努力变得值得，我相信这将显着提高开发人员的工作效率和整体项目的可维护性。通过仔细解决这些问题，您可以充分利用 Vite 的现代化工具并提高开发工作流程的效率。

以上是从 Create-React-App 迁移到 Vite：提升旧应用程序的性能的详细内容。更多信息请关注PHP中文网其他相关文章！