使用 Vite 替代 Create React App_react cra vite 有什么区别-优快云博客

本文链接：https://blog.youkuaiyun.com/ConardLi/article/details/142962094

你好，前端开发爱好者。

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()],
    });