前言
在 Vue 项目从中小型应用迭代到大型后台管理、电商商城、H5 活动页的过程中，几乎所有开发者都会遇到首屏加载慢、页面卡顿、滚动白屏、包体积过大等性能问题。
尤其在用户侧网络环境参差不齐、设备性能差异巨大的场景下，粗暴的编码方式会直接导致用户流失、体验崩盘。
本文基于Vue3 + Vite 实战项目，从代码层面、渲染层面、资源层面、首屏加载四大核心维度，拆解落地级性能优化方案，所有方案均配套可直接复制的代码、避坑要点，兼顾原理深度与实战易用性，帮你把 Vue 项目性能拉满。
一、代码层面优化：从源头减小包体积、提升执行效率
代码层面是性能优化的根基，核心目标是减少无用代码、按需加载、降低初始化开销，重点解决包体积过大、首次加载资源过多问题。
1.1 路由懒加载：拆分路由包，拒绝一次性加载全量代码
绝大多数 Vue 项目卡顿、首屏慢的根源，都是路由全量引入，项目启动时加载所有页面组件，导致 chunk-vendors 体积暴增。
路由懒加载的核心原理：将路由对应的组件拆分为独立代码块，路由切换时才异步加载对应资源，Vue 官方原生支持，无需额外插件。
1.1.1 常规写法（不推荐，全量加载）
// router/index.js
import Home from '@/views/Home.vue'
import User from '@/views/User.vue'
import Order from '@/views/Order.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/user', component: User },
{ path: '/order', component: Order }
]
1.1.2 路由懒加载写法（推荐，Vite/Webpack 通用）
// router/index.js
const routes = [
{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/user',
component: () => import('@/views/User.vue')
},
{
path: '/order',
component: () => import('@/views/Order.vue')
}
]
1.1.3 进阶：路由分组打包（减少请求数）
对于关联度高的页面，可通过/* webpackChunkName: "group-xxx" */打包到同一个 chunk，避免过多小请求：
component: () => import(/* webpackChunkName: "user" */ '@/views/User.vue')
1.2 组件懒加载：非核心组件延迟加载
除了路由，页面中的弹窗、侧边栏、非首屏模块等组件，无需初始化时加载，用 Vue 官方defineAsyncComponent实现组件懒加载。
实战代码（Vue3）
<template>
<div class="page">
<!– 核心组件直接渲染 –>
<MainContent />
<!– 非核心组件懒加载 –>
<Suspense>
<template #default>
<DialogForm />
</template>
<template #fallback>
<div>加载中…</div>
</template>
</Suspense>
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
import MainContent from './components/MainContent.vue'
// 异步懒加载弹窗组件
const DialogForm = defineAsyncComponent(() =>
import('./components/DialogForm.vue')
)
</script>
搭配Suspense可实现加载占位，避免页面抖动。
1.3 Tree Shaking：剔除无用代码，极致压缩包体积
Tree Shaking 是 ES Module 的死代码消除机制，Vite/Webpack 会自动剔除未被使用的代码，核心前提是使用 ES Module 规范、避免全量引入第三方库。
1.3.1 常见失效场景（避坑）
1.3.2 正确写法：按需引入
// 错误：全量引入，Tree Shaking失效
import * as utils from '@/utils'
// 正确：按需引入，仅打包使用的方法
import { debounce, formatDate } from '@/utils'
// 组件库按需引入（Vue3+ElementPlus）
import { ElButton, ElTable } from 'element-plus'
1.3.3 Vite 配置强化 Tree Shaking
// vite.config.js
export default defineConfig({
build: {
// 关闭生成源码映射，减小包体积
sourcemap: false,
// 开启代码压缩
minify: 'terser',
terserOptions: {
compress: {
// 剔除console.log
drop_console: true,
drop_debugger: true
}
}
}
})
二、渲染层面优化：杜绝无效重渲染，解决页面卡顿
Vue 基于响应式系统实现视图更新，但不合理的响应式使用、长列表渲染，会导致频繁重渲染、页面卡顿、滚动掉帧，渲染优化核心是减少 DOM 操作、避免无效更新。
2.1 虚拟列表：解决长列表卡顿，万条数据丝滑滚动
长列表（如订单列表、用户列表）直接渲染所有 DOM 是前端大忌，1000 条数据就会生成 1000 个 DOM 节点，直接导致浏览器卡死。
虚拟列表核心原理：仅渲染可视区域内的 DOM，滚动时动态替换节点，无论多少条数据，始终只渲染少量 DOM。
实战：使用vue-virtual-scroller实现虚拟列表
npm install vue-virtual-scroller@2.0.0-beta.8
<template>
<RecycleScroller
class="list-container"
:items="userList"
:item-size="60"
key-field="id"
>
<template #default="{ item }">
<div class="list-item">{{ item.name }} – {{ item.phone }}</div>
</template>
</RecycleScroller>
</template>
<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
// 模拟万条数据
const userList = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `用户${i}`, phone: '138xxxx0000' }))
</script>
实测：10 万条数据也能丝滑滚动，无任何卡顿。
2.2 减少重渲染：精准控制响应式更新
Vue 组件重渲染的核心原因是响应式数据变化、父组件渲染带动子组件渲染，90% 的重渲染都是无效的。
2.2.1 核心优化手段
实战代码：浅层响应式优化
import { shallowRef } from 'vue'
// 复杂列表数据，无需深度监听，用shallowRef
const tableList = shallowRef([])
// 仅替换整个数组时才更新，避免内部字段变更触发重渲染
tableList.value = newList
2.3 v-memo 指令：Vue3 专属渲染优化神器
v-memo是 Vue3 新增的缓存指令，用于缓存模板 / 组件，依赖项不变时，直接跳过渲染，性能远超v-once，适合列表项、静态模块优化。
2.3.1 基础用法
<template>
<!– 依赖id和name，不变则不重新渲染 –>
<div v-memo="[item.id, item.name]">
{{ item.name }} – {{ item.age }}
</div>
</template>
2.3.2 长列表实战优化
<template>
<div v-for="item in list" :key="item.id">
<!– 仅依赖id变更时渲染，大幅减少更新 –>
<div v-memo="[item.id]">
<span>{{ item.title }}</span>
<span>{{ item.status }}</span>
</div>
</div>
</template>
避坑：v-memo依赖项不能乱写，依赖过多会失去优化效果，仅监听核心变更字段。
三、资源层面优化：压缩 + 懒加载 + CDN，降低加载耗时
前端资源（图片、JS、CSS、第三方库）是首屏加载的大头，资源优化核心是压缩体积、延迟加载、加速分发，解决图片白屏、资源加载慢问题。
3.1 图片懒加载：避免首屏加载所有图片
页面中大量图片（尤其是商品图、轮播图）会阻塞首屏渲染，图片懒加载原理：图片进入可视区域后再加载，Vue 可通过自定义指令或插件实现。
实战：自定义图片懒加载指令
// directives/lazyLoad.js
export default {
mounted(el, binding) {
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
observer.observe(el)
}
}
// main.js 全局注册
import lazyLoad from '@/directives/lazyLoad'
app.directive('lazy', lazyLoad)
<!– 使用 –>
<img v-lazy="item.imgUrl" alt="商品图" />
3.2 资源压缩：JS/CSS/ 图片极致压缩
Vite 图片压缩配置
npm install vite-plugin-imagemin -D
// vite.config.js
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
viteImagemin({
gifsicle: { optimizationLevel: 3 },
optipng: { optimizationLevel: 7 },
mozjpeg: { quality: 80 }
})
]
})
3.3 CDN 加速：第三方库走 CDN，减小本地包体积
将 Vue、Axios、ElementPlus 等第三方库替换为 CDN 引入，剔除出本地打包包，大幅减小 chunk-vendors 体积，同时利用 CDN 节点加速加载。
实战：Vite CDN 配置
// vite.config.js
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
importToCDN({
modules: [
{ name: 'vue', var: 'Vue', path: 'https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js' },
{ name: 'axios', var: 'axios', path: 'https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js' }
]
})
]
})
四、首屏优化：骨架屏 + 预加载 + SSR，秒开页面
首屏加载速度是用户体验的核心指标，也是搜索引擎排名的关键，首屏优化目标：1 秒内呈现内容，3 秒内完成交互。
4.1 骨架屏：减少用户等待焦虑感
骨架屏是页面加载前的占位 UI，替代白屏，让用户感知加载速度更快，分为手写骨架屏和自动生成骨架屏。
实战：手写简易骨架屏
<template>
<!– 数据加载中显示骨架屏 –>
<div class="skeleton" v-if="loading">
<div class="skeleton-line"></div>
<div class="skeleton-line short"></div>
</div>
<!– 数据加载完成显示内容 –>
<div v-else>
{{ content }}
</div>
</template>
<style scoped>
.skeleton-line { height: 20px; background: #f2f2f2; border-radius: 4px; margin: 10px 0; }
.short { width: 60%; }
</style>
4.2 预加载：提前加载核心资源
通过link rel="preload"预加载关键 JS、CSS、字体，让浏览器优先下载核心资源，加速首屏渲染。
<!– public/index.html –>
<link rel="preload" href="/js/core.js" as="script">
<link rel="preload" href="/css/index.css" as="style">
4.3 SSR/SSG：服务端渲染，极致首屏速度
对于电商、官网等对首屏和 SEO 要求极高的项目，SSR（服务端渲染）/SSG（静态站点生成） 是终极方案：
- SSR（Nuxt3）：服务端渲染页面，返回完整 HTML，首屏秒开，SEO 友好
- SSG（VitePress）：构建时生成静态 HTML，无服务端开销，加载速度极致
Nuxt3 快速入门（SSR）
npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev
Nuxt3 原生支持 SSR，无需额外配置，自动实现服务端渲染，首屏性能拉满。
五、综合优化方案与实战落地总结
在实际项目中，单一优化方案效果有限，推荐组合使用以下方案，实现全链路性能优化：
性能优化校验工具
六、总结
Vue 性能优化不是一蹴而就的，而是贯穿项目开发全流程的细节工作。
本文从代码、渲染、资源、首屏四大维度，覆盖了 Vue 项目最常用、最落地的优化方案，所有代码均来自真实生产项目，无炫技、无冗余，直接复制即可使用。
对于中小型项目，做好懒加载、图片优化、骨架屏就能满足 90% 的性能需求；大型项目可结合虚拟列表、SSR 实现极致性能。
后续可继续深入：Web Worker 处理复杂计算、Service Worker 离线缓存、HTTP2 多路复用等进阶优化。
