從 Create-React-App 到 Vite: React 開發再加速

自從 webpack 越來越發達後，前端開發再也不是直接寫腳本給瀏覽器執行了。不管是寫什麼，總會有個工具把原始碼打包成瀏覽器看的 code。開發時也會開著 dev-server，配合 hot-reload module 的即時更新剛寫的程式碼。前端框架三本柱 VAR 也發展出各自的打包工具，Vue 有 vue-cli，React 有 create-react-app(CRA) 配合 Craco 延伸設定。

2020年 vue社群推出來全新的打包工具，Vite。隔壁朋朋的新工具會帶給 React 開發者什麼新的優勢嗎？

Vite 就是快

Vite 是法文的「快」，念法「veet」，分為 dev server 以及 build tool 兩部分。與原本的打包工具相比 dev server 快了 10–20 倍。

Vite 的 dev server 把 project 分成 dependencies 跟 source code 來處理。dependencies 透過 es-build 預打包(pre-bundle)，source code 只轉換成 ESM 的標準，直接提供給瀏覽器。由於 es-build 的效率以及 source code 只是轉換成 ESM，Vite 的 dev server 提供了非常流暢的體驗。build tool 則使用成熟的 rollup 打包，加強對舊瀏覽器的支持。

與 CRA 比較

我們直接來比較 CRA 以及 Vite 準備好 dev server 的時間。

• Vite

• CRA

Vite 在 1 秒內準備好 dev server，CRA 則需要快 18 秒的時間，這樣的 10–20 倍的速度差異，在開發的體驗上完全是不同次元的兩件事。
指令打完後，Vite就可以打開瀏覽器了，而CRA則是要在電腦前發呆一下才能看到網頁。

實驗相關資訊:
專案的大小在打包後大約 320KB (gziped)，Vite 內建有計時，CRA 則是在 script 輸出 server 資訊後，process.exit() 並計時。

搬遷步驟

1. 安裝 Vite 以及 Dependency
2. 搬遷 Configuration
3. 調整 Source Code
4. 收尾

1. 安裝 Vite 以及 Dependency

安裝套件

yarn add -D vite  @vitejs/plugin-react vite-plugin-html

另外有其它套件可供選配

• @vitejs/plugin-legacy
• vite-plugin-svgr
• vite-plugin-eslint
• …

打開 package.json

"scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
 },

2. 搬遷 Configuration

在 CRA 中，打包的設定要透過 CRACO 去延伸，會在 craco.config.js 中設定，Vite 則是在 vite.config.js 中設定。這裡舉了一些常用的設置最為例子，把在 craco.config.js 的設定搬到 vite.config.js。。

打開 vite.config.js

主要就分為三個部分

• plugin:
  引入 @vitejs/plugin-react 以及 vite-plugin-html
• server:
  port、proxy
• build:
  把輸出路徑設定成跟 CRA 相同的 build/，多入口、 rollupOptions

還有其他縮寫類的設定

3. 調整 source code

把 public/ 裡的 index.html 移到專案的 root

vite 的dev server 直接從專案的 root 把 index.html 還有其他 module 按照路徑送出去，所以不把 index.html 夾在 public/ 裡。

刪除 %PUBLIC%

index.html 不再放在 public 裡，%PUBLIC_URL% 自然也就跟著刪掉。
如果不刪掉的話，會看到

URIError: URI malformed

調整副檔名 .js -> jsx

vite 不支援 js 裡有 jsx，忘記的更改檔名的話會得到以下錯誤訊息，其實照錯誤訊息做就好了。

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

require 改為 import

Vite 使用原生的 ES module，require 不是 ES module的標準，通通改成 import。
另外，vite 不支援 dynamic import。

更新環境變數

把 REACT_APP_to_VAR 替換成 VITE_VAR
把 process.env 替換成 import.meta.env

4. 收尾

刪掉

"scripts": {
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "craco eject"
}

刪掉

yarn remove react-scripts

用 depcheck 檢查有沒有沒用到的 package，通通刪掉。

npx depcheck
# then delete unuesd package

Done

yarn starts

have fun :)

如果這篇文章對你有幫助，可以 follow 我的 medium ，幫助我的文章能被設定為可被引擎搜尋。

Reference

• https://vitejs.dev/config/
• https://www.darraghoriordan.com/2021/05/16/migrating-from-create-react-app-to-vite/
• https://juejin.cn/post/7010571160060428318