❌

阅读视图

发现新文章，点击刷新页面。

我整理了一份 Vue 性能优化指南（给AI用的）

✇掘金 前端
ursazoo

为什么做这个

说实话，这个项目是我自己用的。

工作这几年，遇到的性能问题基本都是类似的坑：接口瀑布流、bundle 越来越大、响应式乱用。每次踩完坑修好了，过段时间换个项目又踩一遍。

后来想着，干脆整理一份文档，自己查方便，也能给 AI 编码助手看（我现在用 Claude Code），这样审代码的时候能提前发现问题。

整理完发现，好像也可以分享出来，说不定有人也遇到过这些问题。

我踩过的坑

这几年写 Vue 项目（Vue 2/3 + Nuxt 都有），踩过不少坑：

接口请求变成瀑布流 一个 await 接一个 await，明明能并行的请求硬是串行了。用户抱怨页面慢，一查发现 3 个接口排队等了 750ms。

bundle 体积失控 每次加需求就往里塞代码，没人关心打包结果。等到首屏白屏 3 秒了，才发现 JavaScript 已经 300KB+。

响应式系统滥用 大对象直接 ref()，上千条商品数据，每个字段都变成响应式。渲染一卡一卡的，还以为是组件写得不好。

这些问题不是什么高深的优化，就是基本功。但忙起来就容易忽略，等出问题再改成本就高了。

怎么说呢，优化要分轻重

我发现很多人（包括以前的我）做性能优化会搞错重点。

举个例子：页面有 600ms 的请求等待时间，结果花一周优化 computed 缓存。首屏加载了 300KB 的 JavaScript，结果去优化循环少跑几次。

其实应该先解决大问题：

  1. 先干掉请求瀑布流 - 能并行就并行，该预加载就预加载
  2. 再砍 bundle 体积 - 代码分割、动态导入、tree-shaking
  3. 然后才是组件和响应式优化 - 减少不必要的渲染

我按这个思路把规则分成了 10 个类别，从 CRITICAL 到 LOW，总共 46 条。先把影响大的问题解决了，那些微优化可以慢慢来。

里面有什么

10 个类别，46 条规则：

  • 消除异步瀑布流（CRITICAL）
  • 包体积优化（CRITICAL）
  • 服务端性能（HIGH）
  • 客户端数据获取（HIGH）
  • 响应式系统优化（MEDIUM-HIGH）
  • 渲染性能（MEDIUM）
  • Vue 2 特定优化（MEDIUM）
  • Vue 3 特定优化（MEDIUM）
  • JavaScript 性能（LOW-MEDIUM）
  • 高级模式（LOW）

每条规则的格式：

  • 影响等级（CRITICAL / HIGH / MEDIUM / LOW）
  • 错误示例（我以前写过的错误代码）
  • 正确示例（后来改成什么样）
  • Vue 2/3 兼容性说明

举几个我踩过的坑

坑 1：不需要的 await 也在阻塞代码

以前写过这样的代码：

async function handleRequest(userId: string, skipProcessing: boolean) {
  // 即使 skipProcessing=true，也会等待 userData
  const userData = await fetchUserData(userId)

  if (skipProcessing) {
    // 立即返回，但前面已经浪费时间等待了
    return { skipped: true }
  }

  // 只有这个分支使用 userData
  return processUserData(userData)
}

问题是，即使 skipProcessing=true，还是会去请求 userData。白白浪费时间。

后来改成这样：

async function handleRequest(userId: string, skipProcessing: boolean) {
  if (skipProcessing) {
    return { skipped: true }
  }

  // 只在需要时才获取数据
  const userData = await fetchUserData(userId)
  return processUserData(userData)
}

其实很简单，但之前就是没注意到。

坑 2：大对象别直接用 ref

1000 条商品数据，每条 10+ 个字段，以前直接 ref()：

<script setup lang="ts">
import { ref } from 'vue'

// 1000 个商品，每个商品 10+ 字段，全部变成响应式
const products = ref<Product[]>([])

async function loadProducts() {
  products.value = await fetchProducts()
  // Vue 会递归遍历所有对象，添加响应式代理
}
</script>

渲染的时候卡得要命。后来发现应该用 shallowRef：

<script setup lang="ts">
import { shallowRef } from 'vue'

// 只有数组本身是响应式的，内部对象保持普通对象
const products = shallowRef<Product[]>([])

async function loadProducts() {
  // 替换整个数组触发更新，无需深度响应式
  products.value = await fetchProducts()
}
</script>

shallowRef 只让数组本身响应式，内部对象保持普通对象。更新时替换整个数组就能触发响应，省了大量性能开销。

几个真实案例（我遇到过的）

案例 1：别对同一个数组循环多次

之前接手一个项目，发现同一个商品列表循环了 5 次：

// 错误：5 次独立遍历
const discounted = products.filter(p => p.discount > 0)
const inStock = products.filter(p => p.stock > 0)
const featured = products.filter(p => p.featured)
const totalValue = products.reduce((sum, p) => sum + p.price, 0)
const avgPrice = totalValue / products.length

看着就难受。后来改成一次循环：

// 正确：一次遍历
const stats = products.reduce((acc, product) => {
  if (product.discount > 0) acc.discounted.push(product)
  if (product.stock > 0) acc.inStock.push(product)
  if (product.featured) acc.featured.push(product)
  acc.totalValue += product.price
  return acc
}, { discounted: [], inStock: [], featured: [], totalValue: 0 })

const avgPrice = stats.totalValue / products.length

商品少的时候看不出来，数据一多性能差距就很明显了。

案例 2：独立的请求不要排队

用户详情页，三个互不依赖的接口，结果在串行调用：

// 错误：串行：总耗时 = 300ms + 200ms + 250ms = 750ms
const user = await fetchUser(userId)          // 300ms
const posts = await fetchUserPosts(userId)    // 200ms
const comments = await fetchUserComments(userId) // 250ms

改成并行之后：

// 正确：并行：总耗时 = max(300ms, 200ms, 250ms) = 300ms
const [user, posts, comments] = await Promise.all([
  fetchUser(userId),
  fetchUserPosts(userId),
  fetchUserComments(userId)
])

总耗时从 750ms 降到 300ms，页面快了一半多。这种优化投入产出比最高。

案例 3：长列表用 CSS content-visibility

1000+ 条评论的页面，初始渲染很慢：

<!-- 错误：所有评论立即渲染 -->
<div v-for="comment in comments" :key="comment.id">
  <CommentCard :comment="comment" />
</div>

后来加上 content-visibility：

<!-- 正确：浏览器跳过屏幕外的渲染 -->
<div
  v-for="comment in comments"
  :key="comment.id"
  class="comment-item"
>
  <CommentCard :comment="comment" />
</div>

<style>
.comment-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}
</style>

浏览器会跳过屏幕外的渲染，初始加载快了 5-10 倍，滚动也流畅多了。这个 CSS 属性真的好用。

怎么用

直接看

# 克隆仓库
git clone https://github.com/ursazoo/vue-best-practices.git

# 安装依赖
npm install

# 构建 AGENTS.md
npm run build

克隆下来，直接看 rules/ 目录下的规则文件。每个文件都是独立的，包含问题说明、代码示例和解决方案。

也可以看构建好的 AGENTS.md，把所有规则整合在一起，方便搜索。

集成到 AI 编码助手

如果你也在用 Claude Code、Cursor 这类 AI 工具写代码，可以集成进去：

npx add-skill vue-best-practices

AI 审查代码的时候，如果发现性能问题（比如请求瀑布流、过度响应式），会参考这些规则给出优化建议。我现在就是这么用的，挺方便。

Vue 2 还是 Vue 3

都支持。每条规则都标注了版本兼容性：

  • Vue 2 & 3 通用：基础的性能优化技巧
  • Vue 3 Only：用了 <script setup>、shallowRef、Suspense 等新特性
  • Vue 2 Only：针对 Vue 2 的特定优化（比如 Object.freeze()）

老项目也能用，新项目能用得更充分。

项目地址

GitHub: github.com/ursazoo/vue…

欢迎贡献

这是个开源项目。如果你在生产环境踩过坑、有更好的优化方案，欢迎提 Issue 或 PR。

特别是：

  • 实际项目中遇到的性能问题
  • 现有规则的改进建议
  • Vue/Nuxt 新版本的优化技巧

项目信息：

  • 46 条规则，10 个类别
  • 按影响程度排序（先解决大问题）
  • 支持 Vue 2/3 和 Nuxt
  • 适配 AI 编码助手

希望对你有帮助。

❌