likes
comments
collection
share

【译文】Vite是什么？为何推荐使用Vite代替Create React App？

作者站长头像
站长
· 阅读数 22

原文链接：luketheweb.dev/blog/what-i…

Create React App和Vite究竟是什么？

简单的讲，Create React App（下文简称CRA）和Vite（发音为veet，是法语单词，意为“快速”）都是帮助你创建React应用的工具。

任何应用都应满足如下的基本需求：

  • 有开发环境，以便修改源码以及在浏览器展示。
  • 在IDE中可以整理（原文是lint，esLint的lint）代码，以便及时报错。
  • 可以将源码转译为更低版本（Babel支持）。
  • 构建打包能力。

为了避免手动设置上述需求会耗时繁琐和吃力不讨好，脚手架（CRA）和满足脚手架能力的工具（Vite）应运而生。

Create React App的缺陷

在业界，使用CRA已经成为了创建React应用约定俗成的惯例。它确实是个好办法，多年来也一直在迭代升级。

npx create-react-app my-app
cd my-app
npm start

然而，CRA也有自身的痛点（也是Vite力主提升的方向）：当项目体积变大，开发时间和构建时间也会大幅增加。原因是，无论进行任何更改，CRA都会全量的重新构建应用。

Vite提供了一个演示CRA这种行为的图表（请品品这句话😂尤大也不是啥省油灯😂）：

【译文】Vite是什么？为何推荐使用Vite代替Create React App？

为何推荐Vite？

不同于CRA的全量构建，Vite是按需构建的。Vite将一个应用分为两个部分：依赖和源码。

依赖

依赖在开发过程中，基本不会变动。Vite使用esbuild（基于Go语言，比传统JS要快10-100倍）预打包了依赖，而且由于依赖变动极少，所以会被缓存起来以节省大量时间。

源码

源码采用了ESM（ECMAScript modules）作为模块体系。好处是无需打包，按需加载，所以速度快的难以置信。

【译文】Vite是什么？为何推荐使用Vite代替Create React App？

Vite到底有多快？（真香警告）

我找到了一个用CRA构建的开源应用，然后将其转换为Vite，以便对比。

Note：下文代码中使用的gnomon是一个npm 包 ，用于观察执行命令所用时间。

实验：Cypress Real World App

原汁原味CRA，耗时28秒。

cypress-realworld-app git:(develop) ✗ yarn start:react | gnomon
             yarn run v1.22.15
   0.0589s   yarn run v1.22.15on: No license field
   1.7594s   $ react-scripts -r @cypress/instrument-cra start
   0.0022s   [HPM] Proxy created: [ '/login', '/callback', '/logout', '/checkAuth', 'graphql' ]  ->  http://localhost:undefined
   0.2313s   [HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
   0.0003s   ℹ ｢wds｣: Project is running at http://192.168.0.105/
   0.0002s   ℹ ｢wds｣: webpack output is served from
   0.0000s   ℹ ｢wds｣: Content not from webpack is served from /Users/xikesiyi/Documents/Engineer/骡马/cypress-realworld-app/public
   0.0000s   ℹ ｢wds｣: 404s will fallback to /
   0.0000s   Starting the development server...
  28.4450s

替换Vite后，耗时626毫秒🤯🤯🤯28/0.6约等于46，速度快了46倍🤯🤯🤯

cypress-realworld-app git:(develop) ✗ yarn start:react | gnomon            
warning ../../../../package.json: No license field                                                                                                                                              
   0.0052s   yarn run v1.22.15
   1.1768s   $ vite
   0.0000s   
   0.0000s     VITE v4.2.0  ready in 626 ms

实验结论

Vite以碾压之姿完胜，大清亡了😭

译者按：这里存在一个理论上的实验误差，那就是Vite的速度已经逼近极限，但是CRA的速度有可能受电脑硬件的大幅影响，进而使得速度倍数可能更夸张。比如，原文中的实验数据是80/0.8，整整相差100倍。

如何使用Vite？（真香！）

全新项目

  1. 创建一个Vite应用
# yarn
yarn create vite

# npm
npm create vite@latest
  1. 输入项目的自定义名称，比如例子中的vite-toy：
success Installed "create-vite@4.2.0" with binaries:
      - create-vite
      - cva
? Project name: › vite-toy
  1. 选择项目的框架。我们选择React：
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Others
  1. 选择变体。如代码所示，我们可以选择 JavaScript 或 TypeScript，或其中任何一个加上 SWC。 SWC 是一个代码转译器，很像 Babel。
? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC
  1. Vite 将根据以上选择继续创建项目：
Scaffolding project in /Users/xikesiyi/Documents/Engineer/骡马/vite-toy...

Done. Now run:

  cd vite-toy
  yarn
  yarn dev

✨  Done in 250.10s.

如果愿意的话，我们还可以将项目名称和框架指定为命令行选项，而不是单独执行每个步骤：

# npm 6.x
npm create vite@latest vite-toy --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-toy -- --template react

# yarn
yarn create vite vite-toy --template react

已有项目迁移

  1. 移除react-scripts依赖：
# yarn
yarn remove react-scripts

# npm
npm uninstall react-scripts
  1. 如果使用的是 CSS 或 SCSS，把 sass npm 包添加到 devDependencies 中：
# yarn
yarn add -D sass

# npm
npm i --save-dev sass
  1. 安装vite 和 @vitejs/plugin-react 至devDependencies：
# yarn
yarn add -D vite @vitejs/plugin-react

# npm
npm i --save-dev vite @vitejs/plugin-react

安装后，package.json文件中的devDependencies应包含如下依赖包：

"devDependencies": {
  "sass": "^1.59.3", 
  "@vitejs/plugin-react": "^3.1.0",
  "vite": "^4.2.0"
},
  1. 在package.json文件中更改命令：
"scripts": {
  "start": "vite",
  "build": "vite build"
},

  1. 在根文件夹中创建一个 vite.config.js 文件并添加以下内容：

    Note：@vitejs/plugin-react插件的用处是，不必在每个jsx文件顶部手动引入React

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

export default ({ mode }) => {
  return defineConfig({
    plugins: [react()],
    define: {
      "process.env.NODE_ENV": `"${mode}"`,
    }
  })
}
  1. 将index.html文件移动到项目根目录。
  2. 将index.html 文件中所有 %PUBLIC_URL% 删除：
// From
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

// To
<link rel="icon" href="/favicon.ico" />
  1. 在index.html 文件中添加script脚本：
<div id="root"></div> // 项目已有根节点
<script type="module" src="/src/index.jsx"></script> // 加上脚本
  1. 如果有 .env 文件，需进行字符串替换——将 REACT_APP 替换为 VITE：
// From
REACT_APP_ENV = local
REACT_APP_HOST_UR = https://reqres.in/api/

// To
VITE_ENV = local
VITE_HOST_URL = https://reqres.in/api/
  1. 重新安装依赖
# yarn
yarn

# npm
npm install
  1. 运行项目
# yarn
yarn start

# npm
npm start

恭喜！CRA已替换为Vite🎉🎉🎉

Vite的缺点

Vite并非十全十美的，我们要客观的看待它。

包兼容性问题

在上文寻找开源项目，转化Vite以进行速度比对的时候，我确实遇到了一些兼容性问题，比如packages that were incompatible with Vite.

所以，老项目进行Vite转化，要有遇到兼容问题的心理准备；新项目则不必担心。

开发环境与生产环境的差异

在开发环境中，Vite借助esbuild实现了超级快的加载速度；在生产环境中，Vite借助的是Rollup。所以存在理论上的差异问题，尽管这种情况非常罕见。

总结

CRA其实已经做到了快速便捷的搭建React新项目，但技术在进步，Vite向我们展示了一个更加令人兴奋的新前景。

Vite对于速度的极致追求，提供了一种搭建React项目的全新方式。上文的实验结果不言自明，我也对Vite的快速深表震惊。从今以后，我肯定会在新项目中使用Vite。我想，如果读者对生产力也有所要求，那我推荐你和我一样使用Vite。