Vite 构建速度优化实战：从 35 秒到 21 秒的性能飞跃

一次真实的 Vue 3 + Vite 项目构建性能优化之旅，通过数据驱动的方式，将构建时间缩短 40%

📊 TL;DR（太长不看版）

• 优化前：构建耗时 35.33s，插件总耗时 11.78s
• 优化后：构建耗时 21.03s，插件总耗时 7.40s
• 提升幅度：构建速度提升 40.5%，插件耗时减少 37.2%
• 核心手段：精准配置 + 减少文件扫描 + 数据驱动优化

🎯 背景：当构建变成了"泡咖啡时间"

作为一个拥有 2000+ 模块的 Vue 3 企业级项目，每次构建都要等 35 秒。这意味着什么？

• 每天构建 20 次 = 浪费 11.7 分钟
• 每月工作日 = 浪费 3.9 小时
• 一年 = 浪费 2.4 个工作日

更糟糕的是，这种等待会打断开发者的心流状态。你知道的，程序员最讨厌的就是等待和被打断。

🔍 第一步：找到真凶（性能测量）

工具选择：speed-measure-vite-plugin

在优化之前，我们需要知道时间都花在哪里了。这就像医生看病，得先诊断才能开药方。

# 安装性能测量插件
pnpm add -D speed-measure-vite-plugin

// build/plugins.ts
import speedMeasureWrap from "speed-measure-vite-plugin";

export function createVitePlugins(
  env: Record<string, string>,
  isBuild: boolean,
) {
  const plugins: PluginOption[] = [
    // ... 你的插件配置
  ];

  // 通过环境变量控制是否启用性能测量
  if (env.VITE_SPEED_MEASURE === "true") {
    return speedMeasureWrap(plugins, {
      sort: (a, b) => b - a, // 按耗时降序排列
    });
  }

  return plugins;
}

测量结果：真相大白

$env:VITE_SPEED_MEASURE="true"; npm run build:dev

输出结果让人大吃一惊：

[SMVP]
unplugin-vue-components: 9.317s  👈 占比 79%
  transform  Total: 9.317s  Parallel: 2.069s

@tailwindcss/vite:generate:build: 2.262s  👈 占比 19%
  transform  Total: 2.262s  Parallel: 2.261s

unplugin-element-plus: 0.197s  👈 占比 2%
  transform  Total: 0.197s  Parallel: 0.124s

All plugins total time: 11.776s

关键发现：

• unplugin-vue-components 一个插件就占了近 80% 的时间
• @tailwindcss/vite 占了近 20%
• 这两个插件就是性能瓶颈的"罪魁祸首"

🎪 第二步：对症下药（精准优化）

优化 1：驯服 unplugin-vue-components

问题分析：

这个插件负责自动导入组件，它需要扫描指定目录下的所有组件文件。我们的配置是这样的：

// ❌ 优化前：过度扫描
Components({
  dirs: ["src/components", "src/components/**/src"],
  deep: true,
  // ... 其他配置
});

看起来没问题？但实际上：

• src/components/**/src 这个 glob 模式会递归扫描所有子目录
• 每个子目录的 src 文件夹都会被扫描
• 大量不必要的文件系统遍历

优化方案：

// ✅ 优化后：精确扫描
Components({
  dirs: ["src/components"], // 只扫描一级目录
  deep: true, // 保持深度扫描，但范围更精确
  exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
  version: 3, // 使用最新版本的解析器
});

优化原理：

1. 减少扫描入口：从 2 个目录减少到 1 个
2. 明确排除规则：避免扫描 node_modules 等无关目录
3. 利用缓存：version 3 有更好的缓存机制

优化 2：给 Tailwind CSS 瘦身

问题分析：

Tailwind CSS 需要扫描所有文件来找出使用的类名。我们的配置是：

// ❌ 优化前：扫描过多
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./src/**/*.{css,scss,sass}", // 样式文件中不会有 Tailwind 类名
    "./docs/**/*.{vue,js,ts,jsx,tsx,md}", // 构建时不需要文档
  ],
};

优化方案：

// ✅ 优化后：精准扫描
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,ts,tsx}", // 只扫描必要的文件类型
    // 移除 CSS 文件扫描
    // 移除文档目录扫描
  ],
};

优化原理：

1. 减少文件类型：移除 .js、.jsx（项目使用 TypeScript）
2. 移除无效扫描：CSS 文件中不会包含 Tailwind 类名
3. 排除文档目录：构建时不需要扫描文档

📈 第三步：验证成果（数据说话）

再次运行性能测量：

$env:VITE_SPEED_MEASURE="true"; npm run build:dev

结果令人振奋：

[SMVP]
unplugin-vue-components: 5.771s  ⬇️ 减少 3.5s (38%)
  transform  Total: 5.771s  Parallel: 1.700s

@tailwindcss/vite:generate:build: 1.461s  ⬇️ 减少 0.8s (35%)
  transform  Total: 1.461s  Parallel: 1.460s

unplugin-element-plus: 0.163s
  transform  Total: 0.163s  Parallel: 0.090s

All plugins total time: 7.395s  ⬇️ 减少 4.4s (37%)

总构建时间对比：

指标	优化前	优化后	提升
构建总时间	35.33s	21.03s	40.5% ⬆️
插件总耗时	11.78s	7.40s	37.2% ⬆️
unplugin-vue-components	9.32s	5.77s	38.1% ⬆️
@tailwindcss/vite	2.26s	1.46s	35.4% ⬆️

🎓 深度解析：为什么这些优化有效？

1. 文件系统 I/O 是瓶颈

现代构建工具的性能瓶颈往往不在 CPU，而在文件系统 I/O：

• 读取文件：需要系统调用
• 解析路径：需要递归遍历目录
• 匹配 glob 模式：需要正则表达式匹配

减少扫描的文件数量 = 减少 I/O 操作 = 提升性能

2. Glob 模式的性能陷阱

// 🐌 慢：递归扫描所有子目录的 src 文件夹
"src/components/**/src";

// 🚀 快：只扫描一级目录，通过 deep: true 控制深度
"src/components";

**/ 这个模式会触发递归遍历，性能开销巨大。

3. 缓存的重要性

Vite 的插件系统支持缓存，但前提是：

• 扫描范围稳定
• 文件路径可预测
• 配置不频繁变化

精确的配置 = 更好的缓存命中率

🛠️ 实战技巧：可复用的优化清单

✅ 通用优化原则

1. 测量先行：没有测量就没有优化
2. 精准配置：避免过度扫描
3. 排除无关：明确排除不需要的目录
4. 利用缓存：保持配置稳定

✅ unplugin-vue-components 优化

Components({
  // 1. 精确指定目录
  dirs: ["src/components"],

  // 2. 明确排除规则
  exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/],

  // 3. 构建时跳过类型生成
  dts: isBuild ? false : "src/types/auto-components.d.ts",

  // 4. 使用最新版本
  version: 3,
});

✅ Tailwind CSS 优化

export default {
  content: [
    "./index.html",
    // 只扫描真正包含类名的文件
    "./src/**/*.{vue,ts,tsx}",
  ],
  // 开发环境使用 JIT 模式
  mode: "jit",
};

✅ 其他插件优化

// AutoImport：精确指定导入源
AutoImport({
  imports: ["vue", "vue-router", "pinia"], // 不要用 '*'
  dts: isBuild ? false : "src/types/auto-imports.d.ts",
});

// Vite 本身：启用缓存
export default defineConfig({
  cacheDir: "node_modules/.vite",
  build: {
    reportCompressedSize: false, // 跳过压缩大小统计
  },
});

🎯 进阶优化：还能更快吗？

1. 使用 SWC 替代 Babel

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc"; // 使用 SWC 版本

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

SWC 是用 Rust 编写的，比 Babel 快 20-70 倍。

2. 优化依赖预构建

export default defineConfig({
  optimizeDeps: {
    include: [
      "vue",
      "vue-router",
      "pinia",
      "element-plus",
      // 明确列出大型依赖
    ],
    force: false, // 不要强制重新预构建
  },
});

3. 使用 esbuild 压缩

export default defineConfig({
  build: {
    minify: "esbuild", // 比 terser 快 20-100 倍
    target: "es2020", // 现代浏览器目标
  },
});

📊 ROI 分析：优化值得吗？

让我们算笔账：

时间成本：

• 分析问题：30 分钟
• 实施优化：20 分钟
• 测试验证：10 分钟
• 总计：1 小时

收益：

• 每次构建节省：14.3 秒
• 每天构建 20 次：节省 4.8 分钟
• 每月工作日：节省 1.6 小时
• 一年：节省 19.2 小时

ROI = 19.2 / 1 = 1920%

而且这还没算上：

• 开发体验提升
• 心流状态保持
• 团队整体效率提升

🎬 总结：性能优化的哲学

核心原则

1. 测量驱动：没有数据就是瞎猜
2. 精准打击：优化瓶颈，不要全面撒网
3. 持续监控：性能会随时间退化

优化心法

测量 → 分析 → 优化 → 验证 → 监控
  ↑                              ↓
  └──────────────────────────────┘

最后的建议

• ✅ DO：定期测量构建性能
• ✅ DO：精确配置插件选项
• ✅ DO：排除不必要的扫描
• ❌ DON'T：过度优化
• ❌ DON'T：牺牲可维护性
• ❌ DON'T：盲目跟风

🔗 相关资源

• speed-measure-vite-plugin
• Vite 性能优化指南
• unplugin-vue-components 文档
• Tailwind CSS JIT 模式

💬 互动时间

你的项目构建速度如何？有没有遇到过类似的性能问题？欢迎在评论区分享你的优化经验！

---

关键词： Vite 性能优化、构建速度优化、Vue 3、Tailwind CSS、unplugin-vue-components、性能测量、前端工程化

标签： #Vite #性能优化 #Vue3 #前端工程化 #构建工具

---

如果这篇文章对你有帮助，别忘了点赞👍、收藏⭐️、关注➕三连！

更多前端性能优化技巧，请关注我的专栏《前端性能优化实战》