你好,前端开发爱好者。
React
开发通常从 Create React App
(CRA)开始,但现在 Vite
在很多方面表现更加优秀,在今天的文章中我们将看一下使用 Vite 替代 Create React App。
什么是 Create React App?
CRA 是一个基于 Babel 和 Webpack 的工具,帮助开发者快速搭建 React 项目。官方团队也对此进行支持,使其成为一个非常受欢迎的选择。CRA 提供一个预配置的环境,让开发者专注于编写代码,而不必担心配置文件。
CRA 的优势
- 官方支持:React 官方团队维护这个工具,负责修复 bug 和添加新功能,并定期更新。
- 成熟生态:CRA 是一个成熟的工具,拥有大量第三方插件,可以与各种开发框架、IDE 和库一起使用。网络上有大量教程和详细文档,可供参考。
- 自动化配置:CRA 处理了大多数配置任务,减少了开发时间,尤其对初学者非常友好。
- 规定默认值:CRA 遵循最佳实践,利用合理的默认值,为 React 项目提供了坚实的基础。
CRA 的工作原理
- 依赖树:Webpack 根据项目的
index.js
文件和入口点生成依赖树。 - 代码转换:Babel 将代码进行转换。
- 代码打包:CRA 将代码打包,并通过 Express 服务器进行服务。
- 热模块替换:CRA 使用 socket 管理热模块替换。
然而,CRA 有一个明显的缺点:在进行任何代码更改时,无论大小,Webpack 都会重复打包过程。这会导致随着源代码的增加,应用的性能和开发速度都会降低。
什么是 Vite?
Vite 是一个现代构建工具,基于 Rollup 打包器,专为解决现有构建工具的限制而设计,优化了速度和性能。Vite 利用本地开发服务器、本地浏览器导入和本地 ECMAScript 模块确保无缝的应用开发,显著减少了构建时间。
Vite 的优势
- 广泛生态:Vite 非常灵活,可以集成大量工具,丰富的插件生态支持多种框架,包括 React 和 Svelte。
- 快速开发:利用本地 ECMAScript 模块导入,消除了手动打包过程,提供预打包的模块和依赖,减少开发时间,其闪电般的开发服务器极大地缩短了构建时间。
- 优化代码体积:Vite 提供的树摇(tree-shaking)和模块懒加载功能,帮助减少代码体积,提升性能。
- 灵活的配置:Vite 的配置非常灵活,可以根据项目需求定制每一个方面。
Vite 的工作原理
Vite 在开发过程中主要做两件事:本地服务代码和生产环境打包 CSS、JavaScript 以及其他静态资源。Vite 与传统工具(如 Rollup、Parcel 和 Webpack)不同,不需要在每次保存、修改和更新时重新打包所有内容。它采用相反的方式,从服务器启动,采用 esbuild 打包未更改的依赖项。
Vite 与 CRA 的区别
性能
Vite 通过 ECMAScript 模块实现预打包,将内部模块合并成一个模块,减少请求数目,从而提高性能。而 CRA 缺乏预打包机制,会导致浏览器拥塞,使应用性能下降。
开发速度
Vite 使用基于 ECMAScript 模块的开发服务器,比基于 Webpack 的 CRA 快。Vite 的预配置 Rollup 构建工具在处理生产环境构建时也更高效,构建时间更快,产出文件体积更小。
配置
CRA 提供零配置设置,这对于快速启动 React 应用很友好,但也缺乏灵活性。Vite 允许快速编写 Rollup 插件,扩展其能力。
为什么选择 Vite?
Vite 提供了许多 CRA 不具备的优势,例如高效的构建、快速的文件更新和丰富的功能。以下是一些主要的好处:
- 高效构建:提供优化的生产构建,减小包大小,提高构建性能。
- 快速文件更新:通过热模块替换和使用 HTTP 请求来获取模块,提高全页面刷新速度。
- 丰富的功能:内置动态导入,支持多种文件类型。
将 CRA 项目迁移到 Vite
以下是迁移过程的步骤:
- 卸载
react-scripts
:
npm uninstall react-scripts
- 安装 Vite 及其相关依赖:
npm install vite @vitejs/plugin-react --save-dev
- 更新
package.json
添加 Vite 脚本:
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
- 将
index.html
文件移动到项目根目录,并更新脚本标签:
<!-- index.html -->
<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>
- 将
.js/.jsx
文件扩展名更改为.jsx
:
mv app.js app.jsx
mv index.js index.jsx
- 添加
vite.config.js
文件到项目根目录:
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});
- 更改
.env
文件中的环境变量:
VITE_SOME_KEY=123
- 运行项目:
npm run dev
CRA 是一款出色的工具,可让您随心所欲地启动新的 React 项目,而 Vite 已证明其在更高效地处理大型 React 项目方面具有价值。这两种构建工具都是可靠的解决方案,各有优缺点。
大家会选择哪一个呢?
如果今天的文章有帮到你,希望能够得到一个免费的点赞和关注~