Create-React-App から Vite への移行: レガシー アプリケーションのパフォーマンスの向上

職場で create-react-app (CRA) から Vite への移行に成功したことを共有できることを嬉しく思います! ?

切り替えは簡単ではありませんでしたが、必要でした。私たちのアプリはますます遅くなり、開発者エクスペリエンス (DX) が低下していました。アプリの再起動が非常に遅いため、ノートパソコンを一日中オンにしたままになっていました。 node_modules を削除して再インストールし、アプリを起動しようとした場合、すべてがダウンロードされて再び起動するまで待つだけで 1 時間無駄になる可能性があります。アプリの起動には通常 12 ～ 15 分かかりますが、特に緊急のバグ レポートに対処する場合には大幅な遅れが生じます。さらに、CRA は非推奨となり、React アプリケーションのブートストラップには推奨されなくなりました。

なぜVite?

最初は、と宣伝されているRspackの使用を検討しました

より強力な機能と優れた生産性を備えた、Webpack のドロップイン代替品。

しかし、移行は私が期待していたほどスムーズではありませんでした。 Rspack は運用準備が整いつつありますが (この記事の執筆時点ではバージョン 1.0.0-beta.4)、私はより成熟し、実戦テスト済みのソリューションである Vite.

Webpack や CRA から離れたことで、これらのツールとその背後にある努力に対する新たな感謝の気持ちが生まれました。これらにより、開発プロセスの大部分が簡素化され、すぐに使用できるセットアップが提供されます。

いつか CRA や Webpack に代わる真のドロップイン機能が登場して、Vite などのツールに切り替えるときに大規模なファイル変更を行う必要がなくなることを願っています。

Webpack、Vite、Rspack が何なのかわからない場合は、前回の投稿でこのウサギの穴を掘り下げ、Webpack とその機能について調べました。 Vite と Rspack は、同様の仕事を行う最新のツールですが、より効率的です。

Vite の私の経験: 長所と短所

古いアプリを Vite に移行する方法を説明する前に、開発環境と運用環境で Vite を使用した短い経験の中で遭遇した長所と短所を共有したいと思います。

長所:

• 高速起動:新規インストール後、サーバーの起動時間が大幅に短縮されました。 Webpack を使用すると、以前は最大 30 分かかりました。 Vite を使用すると、約 8.5 分かかります。その後の起動時間は 12 ～ 15 分からわずか 1.5 分になりました。これはまだ遅いように思えるかもしれませんが、プロジェクトの複雑さを考慮すると、これは成功です。

注意:私がテストしているラップトップはかなり古いものです。より良いスペックを備えた新しいマシンでは、2 回目の起動の起動時間は 20 ～ 30 秒ほどでした。

• ビルド時間の短縮:GitHub ワークフローのビルド時間は、12 ～ 13 分からわずか 7 分に短縮されました — 時間はほぼ半分になりました。この移行により、開発チームは開発者 1 人あたり毎日少なくとも 20 分を節約できます。

Webpackを使用

ヴィテと一緒

短所:

• 開発と本番用の異なるバンドラー:Vite は開発には esbuild を使用し、本番には Rollup を使用しますが、これが大きな問題点でした。一部のページは開発時は完璧に動作しましたが、運用環境ではクラッシュしました。この不一致には手動のテストとトラブルシューティングが必要でしたが、全体的にはそれほど多くの問題はありませんでした。

移行の計画: CRA から Vite に移行する方法

リサーチをしましょう:

これは最も重要なステップです。広範な調査が不可欠です。私は Reddit を閲覧して、CRA から Vite に移行した他の開発者の経験について読みました。ほとんどの人が、このプロセスは難しいが、努力する価値があることに同意しました。さらに、このトピックに関する公式のチュートリアルやドキュメントは現在存在しないため、CRA アプリを Vite に移行するために必要な手順に関するいくつかのブログ投稿を読みました。

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.

• Problème :Certaines bibliothèques peuvent ne pas être entièrement compatibles avec Vite.
• Solution :Mettez à jour ou remplacez 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.

以上がCreate-React-App から Vite への移行: レガシー アプリケーションのパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。