Vite 打包超 500KB 警告优化实录

前言

有一天我打包前端项目时，命令行突然冒出一行黄色警告：

(!) Some chunks are larger than 500 kB after minification.

第一次看到的时候，我还以为打包挂了，吓得我立刻 ctrl + c。

后来才知道------这只是个警告，不是错误。

它的意思是：

你的某些打包文件太大了（超过 500KB），可能影响首屏加载速度。

虽然项目能跑，但作为一个"爱折腾"的前端，我还是决定研究下，
怎么让打包体积更优雅、更快。

一、临时解决方案：调高阈值

先说最简单的方式，只想静静构建，不想被黄色警告烦：

arduino 复制代码

// vite.config.ts
export default defineConfig({
  build: {
    chunkSizeWarningLimit: 2000, // 默认 500kb，这里改成 2MB
  },
});

这个操作能让你立刻清净下来，
但它只是掩耳盗铃 ------ 不会帮你优化体积。

适合"我现在就要出包"的时候。

生产环境别这么干。

二、从根上解决：让代码更轻

下面几步，才是真正能把包"瘦身"的办法。

（按推荐程度从高到低）

1️⃣ 动态导入（React.lazy）

有些模块，比如图表组件、富文本编辑器、文件上传页，

根本不用在首屏加载，就可以懒加载进来。

javascript 复制代码

// ❌ 不推荐（打进主包）
import HeavyChart from "@/components/HeavyChart";

// ✅ 推荐
const HeavyChart = React.lazy(() => import("@/components/HeavyChart"));

<Suspense fallback={<Spin />}>
  <HeavyChart />
</Suspense>

适合拆分的模块：

各个路由页面
图表 / 富文本 / 编辑器
只在某些操作下才会显示的组件

👉 一句话：
"首屏不用的，都懒加载。"

2️⃣ 路由懒加载

如果项目是 React Router，那这步基本属于"白送优化"。

javascript 复制代码

import { lazy } from "react";

const Dashboard = lazy(() => import("@/pages/Dashboard"));
const UserList = lazy(() => import("@/pages/UserList"));

const routes = [
  { path: "/dashboard", element: <Dashboard /> },
  { path: "/users", element: <UserList /> },
];

页面越多，收益越明显。
后台系统尤其推荐。

3️⃣ 手动分包（manualChunks）

Vite 底层是 Rollup，可以通过 manualChunks 主动控制怎么拆包。

举个例子：

php 复制代码

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-dom"],
          antd: ["antd"],
          echarts: ["echarts"],
          lodash: ["lodash"],
        },
      },
    },
  },
});

打完包后会变这样 👇

bash 复制代码

dist/assets/
├── react.js
├── antd.js
├── echarts.js
├── lodash.js
└── index.js

这样浏览器可以缓存独立的库，

下次改业务代码不会导致所有依赖都重新下载。

💡 小结：

优点：缓存更细粒度、首屏更快
缺点：配置要维护

4️⃣ 自动分包（懒人版）

不想手写？那就用函数判断路径自动拆包：

javascript 复制代码

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            if (id.includes("antd")) return "antd";
            if (id.includes("echarts")) return "echarts";
            if (id.includes("react")) return "react-vendor";
            return "vendor";
          }
        },
      },
    },
  },
});

Vite 会自动把第三方库拆成独立包，

这段配置堪称性价比最高的打包优化之一。

三、想看清楚到底是谁太胖：分析工具

装个分析插件，一目了然。

sql 复制代码

pnpm add rollup-plugin-visualizer -D

然后加进 vite.config.ts：

php 复制代码

import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

打包后自动弹出一个 stats.html，

图表告诉你：

哪个依赖最大
哪个页面拖了后腿
哪个库不该打进去

这时候就能精准下手优化了。

四、生产环境推荐模板

如果你懒得一个个配，这份可以直接抄 👇

php 复制代码

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    visualizer({
      open: false,
      gzipSize: true,
      brotliSize: true,
      filename: "dist/stats.html",
    }),
  ],
  resolve: {
    alias: {
      "@": "/src",
    },
  },
  build: {
    target: "esnext",
    chunkSizeWarningLimit: 1500,
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            if (id.includes("react")) return "react-vendor";
            if (id.includes("antd")) return "antd";
            if (id.includes("echarts")) return "echarts";
            if (id.includes("lodash")) return "lodash";
            return "vendor";
          }
        },
      },
    },
  },
});

这份配置：

会自动帮你把常见大库拆包
不会影响开发环境
打包完还能看分析图

干净、稳定、实用。

五、额外补充

优化方向	说明
gzip 压缩	用 `vite-plugin-compression` 启用 gzip/brotli
使用 CDN	React、Antd、ECharts 可放到外部加载
Tree-shaking	保证依赖是 ESM 模式
按需引入	使用 `babel-plugin-import` 或 `unplugin-auto-import`

最后

这个警告，其实不是什么坏事。

它提醒你：项目越来越大，需要开始"体重管理"了。

有时候你只是多 import 了一个图表库；

有时候是组件都在首屏打包；

有时候，是你啥都没动，但依赖版本涨了几 MB 😂

不论如何，遇到这个警告时：

别慌
别直接忽略
也别立刻删功能

先用分析工具看看谁是"罪魁祸首"，

再根据业务权衡要不要拆。

我是那个天天打包到凌晨的前端，

有时候觉得打包像人生：

想一次性加载完所有东西，结果启动巨慢。

优化的过程，其实就是学会取舍。