将 React 应用迁移至 Vite

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 3 天，点击查看活动详情

前言

当下，在项目开发的过程中，对于大多数人来说，会使用 create react app 来创建 react 应用，它开箱即用，零配置，但随着项目中代码量的增加，你的项目构建时间也会随之增加，开发服务启动时间变得缓慢，代码更改后热更新也会变慢，可能会需要 2-5s 才会在页面上体现，那么能否提高构建速度，减少开发者等待的时间呢？

如何提示构建速度？

我们可以将构建工具迁移到 Vite。

Vite 是下一代前端构建工具，可以更快地构建应用程序。

Vite 的亮点

极速的服务启动，使用原生 ESM 文件，无需打包!
轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）
开箱即用，对 TypeScript、JSX、CSS 等支持开箱即用。
Rollup 构建，可选 “多页应用” 或 “库” 模式的预配置
通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
灵活的 API 和完整的 TypeScript 类型。
支持 React, Vue, Preact, Svelte.

创建 vite 新项目

使用以下命令创建全新的 react 应用程序。

yarn create vite my-react-app --template react
复制代码

CRA 为什么慢？

Create react app 使用 wabpack 来打包。

webpack 打包图如上图所示，它将整个项目的代码打包在一起，然后才能启动服务。

Vite 为什么快？

Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且相比 JavaScript 编写的 babel 打包器预构建依赖快 10-100 倍。

依赖预构建

当你首次启动 vite 时，你可能会注意到打印出了以下信息：

Pre-bundling dependencies: （正在预构建依赖：）
  react,
  react-dom
(this will be run only when your dependencies or config have changed)（这将只会在你的依赖或配置发生变化时执行）
复制代码

依赖预构建的目的:

Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM。
性能： Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，例如，lodash-es 有超过 600 个内置模块！通过预构建 lodash-es 成为一个模块，我们就只需要一个 HTTP 请求了！

按需加载

Vite 通过在一开始将应用中代码区分为依赖和源码两类，改进了开发服务器启动时间。

依赖一般是那种在开发中不会改变的 JavaScript，比如组件库，或者一些较大的依赖（可能有上百个模块的库），这一部分使用 esbuild 来进行预构建依赖
源码是我们开发的 JSX，CSS 或者 Vue/Svelte 组件，需要编译后才可以执行。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

如上图所示，当浏览器请求时，Vite 只需要按需编译当前屏幕使用的代码。

缓存优化

Vite 是直接把转换后的 ES module 的 JavaScript 代码，给支持 ES module 的浏览器，让浏览器自己去加载依赖，也就是把压力丢给了浏览器，从而达到了项目启动速度快的效果。在我们修改其中一个代码模块的时候，Vite 热更新非常快，源码中模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

时间对比

我拿一个 create react app 项目，该项目包含 3 个路由页面，14 个组件，迁移到 vite，也就是大家常说的 cra 来测试过，我们一起来对比下时间:

开发模式 CRA 12 s，vite 298 ms

打包模式 CRA 15.66 s，vite 9.11 ms

从 CRA 迁移到 Vite

那么我是如何从老项目迁移到 vite 的呢？

首先从 package.json 删除依赖 react-scripts.
在 dependencies 安装以下依赖

"devDependencies": {
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},
复制代码

修改 package.json 中 scripts 命令

"scripts": {
  // 开发阶段启动 Vite Dev Server
  "dev": "vite",
  // 生产环境打包
  "build": "tsc && vite build",
  // 生产环境打包完预览产物
  "preview": "vite preview"
},
复制代码

创建一个 vite.config.js 输入以下代码

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


export default ({ mode }) => {
  return defineConfig({
    plugins: [react()],
    define: {
      "process.env.NODE_ENV": `"${mode}"`,
    }
  })
}
复制代码

可以看到配置文件中默认在 plugins 数组中配置了官方的 react 插件，来提供 React 项目编译和热更新的功能。

将 index.html 移动到 public 文件夹外面
在 index.html 删除 %PUBLIC_URL%

//修改钱
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//修改后
<link rel="icon" href="/favicon.ico" />
复制代码

在 index.html 引入入口 js 脚本

<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
复制代码

修改 REACT_APP 开头的 env 环境变量

// 修改前
REACT_APP_ENV = local
// 修改后
VITE_ENV = local
复制代码

重新执行 yarn 命令，安装依赖
执行 yarn start 启动

若能够成功启动，那么恭喜你，项目迁移成功了，若不能启动，我们可以根据命令行中的提示，参照 Vite 文档，修改 vite.config.js

小结

Vite 充分利用了浏览器的加载机制和缓存机制等，大大提示了研发效率，vite 虽然快，但不是所有的项目react 项目都可以迁移成功，若有些项目的中的 npm 包并不遵循 CommonJS 和umd 的规范，那就可能迁移失败，不要激进地直接重构一些已有的大型项目，打包不是目的，运行才是，若有些项目webpack 配置特别复杂，那么我们可以升级到 webpack5，或者开启 webpack5 懒编译模式等，这样既能提升部分构建效率，也可以保证项目能够稳定运行。

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。