从 webpack 到 Vite： 大型 React 项目速度对比实录

### SEO 关键词：

前言

尤雨溪的 Vite 2.x 一经推出，便好评如潮。作为一名前端开发人员，我也迫不及待想尝试一下 Vite，看看它在本地到底能比 Webpack 快多少。于是，我拿手头一个比较大的 React 项目改造下来进行了测试。

本文不包含 Vite 原理介绍。如果您对 Vite 感兴趣，可以参考官方文档或其他相关资料。

迁移过程

1. 安装 Vite

npm install --save-dev vite

2. 创建 Vite 配置文件

在项目根目录创建一个名为 vite.config.js 的文件，并添加以下代码：

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

export default defineConfig({
  plugins: [react()],
});

3. 修改项目脚本

将 package.json 文件中的 scripts 部分修改为：

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

4. 运行 Vite

在项目根目录运行以下命令：

npm run dev

Vite 将会启动开发服务器，您可以在浏览器中访问项目。

性能对比

1. 构建速度

在构建速度方面，Vite 比 Webpack 快了很多。使用 Webpack 构建项目需要花费大约 10 分钟，而使用 Vite 只需要花费大约 2 分钟。

2. 热重载

Vite 的热重载也非常快。在修改代码后，Vite 只需几秒钟就能将更改反映到浏览器中。而 Webpack 则需要花费更长的时间。

3. 开发体验

Vite 的开发体验也比 Webpack 好很多。Vite 内置了 HMR（Hot Module Replacement）功能，可以实时更新代码，而 Webpack 则需要手动刷新浏览器。此外，Vite 还支持按需加载，可以减少首次加载时间的，提高开发效率。

总结

总体来说，Vite 在构建速度、热重载和开发体验方面都比 Webpack 好很多。如果您正在开发大型 React 项目，我强烈建议您尝试一下 Vite。