我很高興與大家分享，我們在我的工作場所成功從 create-react-app (CRA) 過渡到 Vite！ ？
切換並不簡單，但卻是必要的。我們的應用程式變得越來越緩慢，開發人員體驗 (DX) 也在惡化。我發現自己整天都開著筆記型電腦，因為重新啟動應用程式的速度非常慢。如果您刪除了node_modules，重新安裝了它們，並嘗試啟動應用程序，您可能會浪費一個小時來等待所有內容下載並再次啟動。該應用程式通常需要 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 的短暫經驗中遇到的優缺點。
注意：我正在測試的筆記型電腦相當舊。在規格較好的新機器上，第二次啟動的啟動時間低至 20-30 秒。
使用 Webpack
與Vite
這是最關鍵的一步。廣泛的研究是必要的。我瀏覽 Reddit，了解其他開發者從 CRA 過渡到 Vite 的經歷。大多數人都認為這個過程很棘手，但值得付出努力。此外，我閱讀了幾篇關於將 CRA 應用程式遷移到 Vite 所需步驟的部落格文章，因為現在沒有關於此主題的官方教學或文件。
yarn remove react-scripts yarn add vite @vitejs/plugin-react --dev
並在專案根目錄
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,
},
});
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> ❌ <link rel="icon" href="/favicon.ico" /> ✅
<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>
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,
},
});
<img src={require('assets/images/logo.svg')}/> ❌
import Logo from 'assets/images/logo.svg';
<img src={Logo}/> ✅
2。解 全域這個沒有定義。
Webpack 應用程式中的全域變數「globalThis」
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。產生用於錯誤監控的來源對映。
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。修復全域 SASS 變數。
//theme.scss ❌
:export {
primaryColor: $app-primary;
secondaryColor: $secondary;
....
}
import theme from '../styles/theme.scss';
<div style={{ color: theme.primaryColor }}>Hello World</div>
將被
取代
// 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。處理 .jsx 檔案的絕對導入。
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。處理 **.scss 檔案的絕對導入。 **
import MyComponent from 'components/MyComponent';
import styles from 'styles/app.scss';
<MyComponent className={styles.someClassName} />
// 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
然後我會像普通 CSS 一樣使用它們
<MyComponent className='someClassName' />
7。解決第三方函式庫問題。
從 create-react-app 過渡到 Vite 是一次充滿挑戰但有益的經驗。僅性能的改進就足以讓這些努力變得值得，我相信這將顯著提高開發人員的工作效率和整體專案的可維護性。透過仔細解決這些問題，您可以充分利用 Vite 的現代化工具並提高開發工作流程的效率。
以上是從 Create-React-App 遷移到 Vite：提升舊應用程式的效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
