选择 Vite 而不是 Create-React-App (CRA) 的 4 个理由

前端孺子牛
223 阅读7分钟

选择 Vite 而不是 Create-React-App (CRA) 的 4 个理由

Create React App (CRA) 长期以来一直是大多数开发人员搭建 React 项目和设置开发服务器的首选工具。它提供了无需配置的现代构建设置。

但是，当项目规模增加时，我们发现开发和构建时间也会增加。这种缓慢的反馈循环会影响开发人员的生产力和幸福感。

为了解决这些问题，生态系统中出现了一个新的前端工具：Vite！

与 CRA 不同，Vite 不会在提供服务之前构建整个应用程序，而是按需构建应用程序。它还利用原生 ES 模块、esbuild和Rollup的强大功能来缩短开发和构建时间。

让我们详细了解一下导致 CRA 变慢的原因。

为什么CRA很慢？

CRA 在后台使用 webpack。webpack 会将整个应用程序代码打包，然后才能提供服务。如果代码库很大，则需要更多时间来启动开发服务器，并且反映所做的更改也需要很长时间。

下图显示了如何捆绑所有代码以启动基于捆绑的开发服务器。

来源：ViteJs 文档

什么是 Vite？

Vite 是新一代、注重速度和性能的前端工具。

它由两个主要部分组成：

  • **提供比原生ES 模块更丰富功能的开发服务器：快速热模块替换（HMR）、预捆绑、支持 typescript、jsx 和动态导入。
  • **将您的代码与Rollup捆绑在一起的构建命令，已预先配置为输出用于生产的优化静态资产。

为什么更喜欢 Vite 而不是 create-react-app？

1. 开发服务器的快速启动

与 CRA 或基于 bundler 的构建设置不同，Vite 在提供服务之前不会构建整个应用程序。它将应用程序模块分为两类：依赖项和源代码。

  1. 依赖项是普通的 JavaScript，在开发过程中不会经常改变（大型组件库，如mui）。
  • Vite 使用esbuild预捆绑这些依赖项，速度比基于 JavaScript 的捆绑器快 10 到 100 倍。
  • 预捆绑可确保每个依赖项仅映射到一个 HTTP 请求，从而避免 HTTP 开销和网络拥塞。
  • 由于依赖关系不会改变，它们也可以被缓存，我们可以跳过预捆绑。
  1. 源代码通常包含需要转换的非纯 JavaScript（例如 JSX、CSS），并且会经常被编辑。Vite通过原生 ESM
    提供源代码。

什么是原生 ESM？它如何改善开发服务器的启动时间？

ESM代表EMACScript 模块。它是 JavaScript 语言规范的最新补充，用于处理如何在 JavaScript 应用程序中加载模块。

围绕原生 ESM 构建开发服务器的好处
  • 无需捆绑。这是一项大工程，你不必再做了。
  • 原生 ESM 本质上是按需的。根据浏览器请求，Vite 按需转换并提供源代码。如果某个屏幕不需要该模块，则不会处理它。该图显示了基于原生 ESM 的开发服务器如何仅加载所需模块来启动。

来源：ViteJs 文档

2. 减少文件更新的等待时间

随着代码库规模的增加，CRA 中的文件更新速度会变慢。Vite 则不会出现这种情况。

我们看看 Vite 如何处理文件更新。

  • 在 Vite 中，热模块替换 (HMR) 是通过原生 ESM 执行的。编辑文件时，Vite 会使编辑模块与其最近的 HMR 边界之间的链失效。这使得 HMR 更新变得简单而快速，无论您的应用程序大小如何。
  • 模块通过 HTTP 请求获取。Vite 利用 HTTP 标头进行缓存，以加快整页重新加载速度。源代码模块请求通过 304 Not Modified 进行条件处理。依赖模块请求通过 Cache-Control: max-age=31536000, immutable 进行缓存。

3. 提升构建性能

Vite 附带一个预先配置的构建命令，可以开箱即用地实现许多性能优化。

1. 异步块加载优化

虽然代码分割、Webpack 和 Rollup 会产生一个公共块（两个或多个其他块之间共享的代码）。当与动态导入结合使用时，这可能会导致许多网络往返。

来源：ViteJs 文档

如图所示，在未优化的场景中，当导入异步块 A 时，浏览器在没有先请求和解析 A 的情况下并不知道它需要公共块 C。在确定需要公共块 C 之后，浏览器才将其导入，从而导致额外的网络往返。

Entry ---> A ---> C

而 Vite 则使用预加载步骤重写了代码拆分动态导入调用。当请求 A 时，将并行获取 C。这消除了网络往返。

Entry ---> (A + C)

2. CSS 代码分割

Vite 会自动提取异步块中模块使用的 CSS 并为其生成单独的文件。加载关联的异步块时，CSS 文件会通过 标签自动加载。

4.丰富的功能

Vite 为 TypeScript、JSX、CSS 等提供开箱即用的支持。

  • TypeScript 

Vite 支持开箱即用的 .ts 文件导入。它使用 esbuild 将 TypeScript 转换为 JavaScript，速度比 vanilla tsc 快 20 到 30 倍。HMR 更新可以在 50 毫秒内反映在浏览器中。

  • JSX 

Viet 开箱即用地支持 .jsx 和 .tsx 文件。JSX 转译通过esbuild处理。

  •  CSS

            导入 .css 文件会通过具有 HMR 支持的 <style> 标签将内容注入页面。 

            Vite 提供对 .scss、.sass、.less、.styl 和 .stylus 文件、PostCSS 和 CSS 模块的支持。

  •  JSON

JSON 文件可以直接导入 Vite。它还支持命名导入。

  • 动态导入

            带变量的动态导入可以与 Vite 一起使用。

考虑到 Vite 的上述好处，我决定将[一个现有项目从 CRA 迁移到 Vite]。让我们看看我是怎么做的。

将 CRA 迁移到 Vite 的步骤

  1. react-scripts从 package.json 中删除依赖项。
  2. sass如果您使用 CSS 或 SCSS，请添加package.json。
yarn add -D sass
//or
npm i --save-dev sass
  1. 添加vite和@vitejs/plugin-react作为开发依赖项。
"devDependencies": {
 "@vitejs/plugin-react": "1.3.2",
 "vite": "2.7.0"
}
  1. 替换start和build脚本如下：
"scripts": {
  "start": "vite",
  "build": "vite build"
},

vite.config.js5.使用以下代码在项目根目录中创建一个文件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default () => {
  return defineConfig({
    plugins: [react()],
 })
}

6.将 index.html 文件从公共文件夹移动到项目的根目录。

%PUBLIC_URL%7.从 index.html 中删除所有出现的。
更改后，受影响的行应类似于以下行：

<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/logo192.png" />
  1. 在 index.html 的主体中添加下面的脚本标签：
<script type="module" src="/src/index.jsx"></script>

注意：在 CRA 中，src/index扩展名为.js，请将其更改为jsx。

9.如果文件包含 jsx 语法，请将文件扩展名更改.js为。如果不更改，您将收到以下错误：.jsx

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

  1. 将所有环境变量从 更新REACT_APP为VITE。
    替换REACT_APP_HOST_URL为VITE_HOST_URL

  2. Vite 默认不支持绝对路径，
    需要使用相对路径或者添加别名。

import App from "components/search/App"; // Not supported
import App from '../src/components/search/App'; // Use relative path

您可以在 vite.config.js 中添加别名，如下所示：

export default () => {
  return defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
  });
}

现在，您可以使用下一行：

import App from '@/components/search/App'

最后使用以下命令安装依赖项：

yarn install or npm install 

12.启动您的应用程序，如下所示：

yarn start
or
npm start

瞧！您的申请已从 CRA 迁移到 Vite！非常顺利。

我看到迁移后的构建时间有了显著的改善。

使用 CRA 构建时间：

使用 Vite 构建时间：

使用 Vite 创建新的应用程序

现在，您已经了解了使用 Vite 的好处。让我们使用 Vite 创建一个新应用程序。

yarn create vite
or
npm create vite@latest

按照提示指定项目名称和模板。

您还可以使用单个命令指定项目名称和模板。

// npm 6.x

npm create vite@latest my-react-app --template react

//npm 7+, extra double-dash is needed

npm create vite@latest my-react-app -- --template react

//yarn

yarn create vite my-react-app --template react

转换至 Vite 时需要考虑的一些重要事项

Webpack 已经统治生态系统很长时间了。与 Vite 社区相比，CRA/webpack 社区的加载器和插件非常丰富。

由于 webpack 的流行以及下面列出的原因，一些用户对使用 Vite 而不是 webpack 持怀疑态度。

  1. 不同的工具被用于捆绑开发（esbuild）和生产代码（rollup）。这可能会导致难以发现/修复的错误。
  2. 由于 Vite 是新产品，用户不确定它将如何处理大型和复杂的用例。
avatar
文章
阅读
粉丝