react快速开始(四)-之Vite 还是 (Create React App) CRA? 用Vite创建项目
文章目录
- react快速开始(四)-之Vite 还是 (Create React App) CRA? 用Vite创建项目
- 背景
- Vite 和 (Create React App) CRA
- Vite？
- Vite 是否支持 TypeScript？
- 用Vite创建react项目
- 参考
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