React 项目中如何配置 vite

Vite 是什么

Vite 是一款由尤雨溪（Vue.js 作者）开发的前端构建工具，旨在提供一种快速的开发体验，尤其是对于 Vue.js 项目。它的主要特性包括：

• 快速的开发服务器
• 即时的模块热更新
• 基于 Rollup 的打包优化
• 集成了常见的 CSS 预处理器和 PostCSS 插件
• 支持 TypeScript 和 JSX

在 React 项目中使用 Vite

要在 React 项目中使用 Vite，我们首先需要通过 create-react-app 创建一个新的项目：

npx create-react-app my-app
cd my-app

然后，我们需要安装 Vite 和相关的插件：

npm install vite @vitejs/plugin-react -D

接下来，我们需要修改 package.json 文件，将 start 命令替换为 Vite 的命令：

{
  "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
  }
}

最后，我们需要创建一个新的配置文件 vite.config.js，并且在其中配置我们的项目：

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

const isProduction = process.env.NODE_ENV === 'production';

export default defineConfig({
  plugins: [
    react(),
    isProduction && terser() // 只在生产环境下使用 terser 压缩
  ],
  build: {
    outDir: 'dist', // 打包输出文件夹
    minify: isProduction, // 只在生产环境下压缩代码
    sourcemap: !isProduction, // 只在开发环境下生成 sourcemap
    rollupOptions: {
      output: {
        // 将第三方依赖库单独打包成一个文件
        manualChunks: {
          react: ['react', 'react-dom'],
          lodash: ['lodash']
        }
      }
    }
  },
  optimizeDeps: {
    // 只打包使用到的第三方依赖库
    include: ['react', 'react-dom', 'lodash']
  },
  server: {
    port: 3000, // 开发服务器端口号
    open: true // 启动开发服务器时自动在浏览器中打开页面
  }
});

在以上配置中，我们使用了 Vite 的 React 插件来支持 JSX 语法，并且通过 Rollup 的插件 terser 来压缩代码。我们还通过 optimizeDeps 配置项来只打包使用到的第三方依赖库，这样可以进一步减小打包文件的大小。

另外，我们还可以在开发服务器中使用 proxy 选项来将 API 请求转发到后端服务器。例如，我们可以将所有以 /api 开头的请求转发到 http://localhost:3001：

export default defineConfig({
  // ...
  server: {
    proxy: {
      '/api': {
        target: '<http://localhost:3001>',
        changeOrigin: true
      }
    }
  }
});

总结

Vite 是一款非常优秀的前端构建工具，可以极大地提高我们的开发效率和打包性能。在 React 项目中使用 Vite，我们需要安装 vite 和 @vitejs/plugin-react 这两个依赖，然后修改 package.json 文件并创建一个新的配置文件 vite.config.js。通过配置不同的选项，我们可以实现快速的开发体验和高效的打包优化。