react快速開始(四)-之Vite 還是 (Create React App) CRA? 用Vite創建項目

背景

在React文檔中，對于構建新的React應用，首推的方式是CRA（create-react-app）。

CRA推出于2016年，彼時還沒有成體系的React腳手架工具供大家使用，再加上這是官方工具，一經推出就受到了歡迎。截止當前，CRA倉庫已經收獲快10wstar。

絕大多數項目都依賴于 Create React App，主要是因為這個特定的解決方案是由最流行的前端應用程序開發庫 React 的創建者推動的。CRA 是 React 文檔中的默認選擇，對于許多開發人員來說，它仍然是默認選項。

在構建 React 應用程序(初學者、中級甚至專家)時,創建 React 應用程序 (CRA) 長期以來一直是所有技能水平的許多開發人員的首選工具。但是,它確實有一些明顯的缺點,即速度和性能。

此外，CRA對一些流行工具的支持也不是很好，比如在TailwindCSS文檔中就不推薦使用CRA。

Create React App（下文簡稱CRA）和Vite（發音為veet，是法語單詞，意為“快速”）都是幫助你創建React應用的工具。

Vite 和 (Create React App) CRA

為什么我們使用 Vite 而不是 Create React App
參考URL: https://makimo.com/blog/why-we-use-vite-instead-of-create-react-app/
create-react-app vs vite
參考URL: https://npmtrends.com/create-react-app-vs-vite

npm trends:

使用Vite，你會收獲以下好處：

• 開發速度顯著提升，讓你可以更有效率地進行開發。
• 構建體積更小，讓你的應用程序加載更快。
• 開發體驗更好，讓你可以更輕松愉快地進行開發。

最近（2024年），國外網友 t3dotgg 建議 React 官方把文檔中關于建議使用 Create React App 來創建新項目更換為建議使用 Vite 來創建新項目。

Vite？

Vite官方中文文檔: https://cn.vitejs.dev/guide/why.html

Vite將一個應用分為兩個部分：依賴和源碼。

• 依賴
  依賴在開發過程中，基本不會變動。Vite使用esbuild（基于Go語言，比傳統JS要快10-100倍）預打包了依賴，而且由于依賴變動極少，所以會被緩存起來以節省大量時間。

• 源碼
  源碼采用了ESM（ECMAScript modules）作為模塊體系。好處是無需打包，按需加載，所以速度快的難以置信。

Esbuild是一個用 Go 編寫的 Javascript 構建工具,它預先打包依賴項的速度比基于 Javascript 的打包工具快 10-100 倍。

Vite 是一款新一代的前端構建工具，專為閃電般的開發速度和高效構建而設計。它采用了一種創新性的開發模式，與傳統的 webpack 相比，顯著提升了開發和構建的效率。

Vite速度快且配置簡單！Vite 采用了創新的開發模式和更有效的構建算法，提供更快的開發速度和更小的構建體積。

Vite 是否支持 TypeScript？

是的，Vite 完全支持 TypeScript，你可以使用 TypeScript 構建你的 React 應用程序。

用Vite創建react項目

為創建一個 Vite應用程序,打開終端并導航到要保存 Vite 程序的文件夾。然后運行這個命令:

npm create vite@latest
npm create vite 項目名稱

設置 Project name、Select a framework(選擇框架)選react

√ Project name: ... web3-todo-list
? Select a framework: ? - Use arrow-keys. Return to submit.
>   VanillaVueReactPreactLit
√ Select a variant: ? TypeScriptScaffolding project in D:\web3\openbuild\Web3-Frontend-Bootcamp\members\dockershe\task1\web3-todo-list...    Done. Now run:cd web3-todo-listnpm installnpm run dev

參考

React為什么不將Vite作為默認推薦？
參考URL: https://cloud.tencent.com/developer/article/2223154
Create React App 被 React 官方拋棄了嗎？
參考URL: https://developer.aliyun.com/article/1207234