使用 Vite 替代 Create React App

你好,前端开发爱好者。

React 开发通常从 Create React App (CRA)开始,但现在 Vite 在很多方面表现更加优秀,在今天的文章中我们将看一下使用 Vite 替代 Create React App。

什么是 Create React App?

CRA 是一个基于 Babel 和 Webpack 的工具,帮助开发者快速搭建 React 项目。官方团队也对此进行支持,使其成为一个非常受欢迎的选择。CRA 提供一个预配置的环境,让开发者专注于编写代码,而不必担心配置文件。

CRA 的优势

  1. 官方支持:React 官方团队维护这个工具,负责修复 bug 和添加新功能,并定期更新。
  2. 成熟生态:CRA 是一个成熟的工具,拥有大量第三方插件,可以与各种开发框架、IDE 和库一起使用。网络上有大量教程和详细文档,可供参考。
  3. 自动化配置:CRA 处理了大多数配置任务,减少了开发时间,尤其对初学者非常友好。
  4. 规定默认值:CRA 遵循最佳实践,利用合理的默认值,为 React 项目提供了坚实的基础。

CRA 的工作原理

  1. 依赖树:Webpack 根据项目的 index.js 文件和入口点生成依赖树。
  2. 代码转换:Babel 将代码进行转换。
  3. 代码打包:CRA 将代码打包,并通过 Express 服务器进行服务。
  4. 热模块替换:CRA 使用 socket 管理热模块替换。

然而,CRA 有一个明显的缺点:在进行任何代码更改时,无论大小,Webpack 都会重复打包过程。这会导致随着源代码的增加,应用的性能和开发速度都会降低。

什么是 Vite?

Vite 是一个现代构建工具,基于 Rollup 打包器,专为解决现有构建工具的限制而设计,优化了速度和性能。Vite 利用本地开发服务器、本地浏览器导入和本地 ECMAScript 模块确保无缝的应用开发,显著减少了构建时间。

Vite 的优势

  1. 广泛生态:Vite 非常灵活,可以集成大量工具,丰富的插件生态支持多种框架,包括 React 和 Svelte。
  2. 快速开发:利用本地 ECMAScript 模块导入,消除了手动打包过程,提供预打包的模块和依赖,减少开发时间,其闪电般的开发服务器极大地缩短了构建时间。
  3. 优化代码体积:Vite 提供的树摇(tree-shaking)和模块懒加载功能,帮助减少代码体积,提升性能。
  4. 灵活的配置: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 不具备的优势,例如高效的构建、快速的文件更新和丰富的功能。以下是一些主要的好处:

  1. 高效构建:提供优化的生产构建,减小包大小,提高构建性能。
  2. 快速文件更新:通过热模块替换和使用 HTTP 请求来获取模块,提高全页面刷新速度。
  3. 丰富的功能:内置动态导入,支持多种文件类型。

将 CRA 项目迁移到 Vite

以下是迁移过程的步骤:

  1. 卸载 react-scripts:
    npm uninstall react-scripts

  1. 安装 Vite 及其相关依赖:
    npm install vite @vitejs/plugin-react --save-dev
  1. 更新 package.json 添加 Vite 脚本:
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    }
  1. 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>
  1. .js/.jsx 文件扩展名更改为 .jsx:
    mv app.js app.jsx
    mv index.js index.jsx
  1. 添加 vite.config.js 文件到项目根目录:
    // vite.config.js
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";

    export default defineConfig({
        plugins: [react()],
    });
  1. 更改 .env 文件中的环境变量:
    VITE_SOME_KEY=123
  1. 运行项目:
    npm run dev

CRA 是一款出色的工具,可让您随心所欲地启动新的 React 项目,而 Vite 已证明其在更高效地处理大型 React 项目方面具有价值。这两种构建工具都是可靠的解决方案,各有优缺点。

大家会选择哪一个呢?

如果今天的文章有帮到你,希望能够得到一个免费的点赞和关注~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值