React 19 + Vite 6 + SWC 构建优化实践

前阵子项目上线后，用户反馈说打开页面特别慢，尤其是第一次访问。我看了一下 Lighthouse 报告，首屏加载时间竟然到了 8 秒多。这肯定不行，得优化。

先看看问题在哪

打开 Chrome DevTools 一看，好家伙，主 bundle 有 2.8MB。问题很明显了：

React、Ant Design 这些大库全打在一起
PDF.js、Tesseract.js 这种重型库也被打包进来了
用户等半天才能看到内容

我的第一反应：用 Vite 的代码分割

Vite 6 自带代码分割，但我发现默认的分包策略对大型项目不够精细。比如 Ant Design 的图标库和核心组件应该分开，这样按需加载时才不会把整个 Ant Design 都拉下来。

我直接在 vite.config.js 里手动定义了分包策略：

javascript 复制代码

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom', 'react-router-dom'],
        'vendor-antd': ['antd', '@ant-design/icons', '@ant-design/x'],
        'vendor-editor': ['@ckeditor/ckeditor5-react', '@ckeditor/ckeditor5-build-classic'],
        'vendor-pdf': ['pdfjs-dist', '@cyntler/react-doc-viewer'],
        'vendor-ocr': ['tesseract.js'],
        'vendor-echarts': ['echarts'],
        'vendor-docx': ['docx', 'jspdf', 'html2canvas'],
        'vendor-markdown': ['markdown-it', 'remark-parse', 'remark-rehype', 'rehype-stringify'],
      },
    },
  },
  chunkSizeWarningLimit: 1000,
}

这样分完之后，每个 chunk 都在 300KB 以内，浏览器可以并行下载。

但是有个坑：开发环境和生产环境不一样

我一开始只配了 npm run dev，结果后来说要分 dev、test、prod 三个环境。怎么搞？

改 package.json，把命令改成环境特定的：

javascript 复制代码

{
  "scripts": {
    "dev:dev": "vite --mode dev",
    "dev:test": "vite --mode test",
    "dev:prod": "vite --mode prod",
    "build:dev": "vite build --mode dev",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode prod"
  }
}

然后创建 .env.dev、.env.test、.env.prod 三个文件，每个文件里的 API 地址不一样。

还有个问题：SWC 编译器比 Babel 快多了

Vite 5 之前默认用 Babel，但 Vite 6 推荐用 SWC。我实测了一下：

Babel 编译时间：12 秒
SWC 编译时间：4 秒

差距很明显。配置很简单，Vite 6 默认就用了 @vitejs/plugin-react-swc：

javascript 复制代码

import react from "@vitejs/plugin-react-swc";

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

生产环境要去掉 console.log

这个我之前没注意，导致生产环境的 bundle 里还有一堆调试日志。加上这段配置：

javascript 复制代码

esbuild: {
  pure: ["console.log"],
  drop: ["debugger"],
  legalComments: "none",
}

这样打包出来的文件干净多了，体积也小了一点。

React 19 还要加个补丁

React 19 刚出的时候，Ant Design 还没完全适配。会出现一些 warning。我加了这个：

javascript 复制代码

import '@ant-design/v5-patch-for-react-19';

现在兼容性没问题了。

最后的效果

优化完之后：

主 bundle 从 2.8MB 降到 800KB
首屏加载时间从 8 秒降到 1.5 秒
Lighthouse 性能评分从 62 分涨到 92 分

用户没再抱怨慢了，我也松了口气。

几个踩坑总结

不要盲目相信自动分包 ：大型项目一定要手动配置 manualChunks
环境变量要提前规划：别等项目做一半了再加环境，改动成本很高
SWC 真的比 Babel 快：如果你的项目编译慢，赶紧换
React 19 + Ant Design 要打补丁 ：别忘了 @ant-design/v5-patch-for-react-19