React 构建工具深度对比：Vite、SWC、Turbopack、Rspack、esbuild 与生产优化策略

# 创建 Vite + React + TypeScript 项目
npm create vite@latest my-app -- --template react-ts

// vite.config.ts —— 完整的生产级配置
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';  // SWC 编译器
import { visualizer } from 'rollup-plugin-visualizer';
import { splitVendorChunkPlugin } from 'vite';

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    splitVendorChunkPlugin(),  // 自动 vendor 拆分
    mode === 'analyze' && visualizer({ open: true }),  // Bundle 分析
  ],
  build: {
    target: 'es2022',
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: {
          // 手动代码分割：第三方库按功能拆分
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
          'ui-library': ['@radix-ui/react-dialog', '@radix-ui/react-tooltip'],
          'charts': ['recharts'],
        },
      },
    },
    chunkSizeWarningLimit: 500,  // 500KB 警告
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@hooks': '/src/hooks',
      '@types': '/src/types',
    },
  },
  css: {
    devSourcemap: true,
    modules: {
      localsConvention: 'camelCase',
    },
  },
}));

# 安装 SWC 插件（推荐）
npm install -D @vitejs/plugin-react-swc

import { lazy, Suspense } from 'react';

// ✅ 每个路由独立 chunk
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Settings = lazy(() => import('./pages/Settings'));

// router.tsx
{
  path: 'dashboard',
  element: (
    <Suspense fallback={<PageSkeleton />}>
      <Dashboard />
    </Suspense>
  ),
},

// 重型组件（图表、富文本编辑器）按需加载
const ChartComponent = lazy(() => import('./components/ChartComponent'));
const MarkdownEditor = lazy(() => import('./components/MarkdownEditor'));

function DataView() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>
      {showChart && (
        <Suspense fallback={<ChartPlaceholder />}>
          <ChartComponent data={data} />
        </Suspense>
      )}
    </div>
  );
}

// 提前预加载下一个可能访问的页面
function DashboardLink() {
  const handleMouseEnter = () => {
    // 鼠标悬停时预加载，用户点击时立即可用
    import('./pages/Analytics');
  };

  return (
    <Link to="/analytics" onMouseEnter={handleMouseEnter}>
      Analytics
    </Link>
  );
}

// 给动态导入指定 chunk 名
const Module = lazy(() =>
  import(/* webpackChunkName: "analytics" */ './Analytics')
);

# Vite Bundle 可视化分析
npm run build -- --mode analyze

// vite.config.ts —— 外部化公共库到 CDN
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        paths: {
          'react': 'https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js',
          'react-dom': 'https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js',
        },
      },
    },
  },
});

<!-- index.html —— 预加载关键资源 -->
<link rel="preconnect" href="https://api.example.com" />
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
<link rel="modulepreload" href="/src/main.tsx" />

// rspack.config.js —— 几乎和 webpack 一样
const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": ["coverage/**"]
    },
    "lint": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

# 并行运行多个应用的 dev 服务器
turbo run dev --filter=@myapp/web --filter=@myapp/admin

# 只构建受影响（git diff）的包
turbo run build --filter=[HEAD~1]