場景

一個公司管理所有客戶資料的後台

是用 React 寫的

但是當初創建這個專案的時候用的是 CRA(create react app)

而要改成使用 Vite 的目的就是提升 DX(develop experience)

Vite 可以很大程度的提高網頁的 hot reload 速度

打包速度非常快，並且只會更新有更改code的部分

加上我自己也想了解這設定上有沒有什麼細節要注意的

作法

大家常常拿來比較的是 CRA and Vite

但是 Vite 其實就是一個打包工具

他代替的是一個叫做 react-scripts 的 node module

而這就是 CRA 打包的工具

Step One

因此 要做的就是先將 react-scripts node module 替換成 vite

npm uninstall react-scripts
npm install vite

Step Two

將 /src 裡面的 index.html 移到根目錄

vite 預設就是抓根目錄的 index.html

Step Three

建立 vite.config.ts

先安裝這個套件

npm install @vitejs/plugin-react-swc

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

export default defineConfig({
  plugins: [react()],
});

為什麼要裝這個套件呢？

因為 快！

他可以更快地解析 react

當然 default 就可以解析了，這只是更快的選擇

他的描述： A fast Fast Refresh (~20x faster than Babel)

Step Four

更改 script 指令

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vite test"
  },