Vue3组合式API项目性能优化实战：从打包体积缩减到首屏加载提速完整方案

Vue3项目的性能瓶颈定位

Vue3组合式API带来了更灵活的代码组织方式，但如果忽视了构建和运行时的性能细节，项目规模增长后会面临打包体积膨胀、首屏加载缓慢、交互卡顿等问题。性能优化的前提是量化——先建立基线数据，再针对性优化。

先安装分析工具建立基线：

# 构建体积分析
npm install --save-dev rollup-plugin-visualizer

# vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
      gzipSize: true,
      filename: 'stats.html'
    })
  ]
})

构建后打开stats.html，可以直观看到每个依赖的体积占比。常见的体积黑洞：lodash全量引入、moment.js、未tree-shake的UI组件库。

Tree-Shaking与按需引入：砍掉无用代码

Vue3本身对Tree-Shaking友好，ref、computed、watch等API都是独立导出，未使用的不会打包。但第三方库不一定：

// 错误：lodash全量引入 (~70KB gzip)
import _ from 'lodash'
import { debounce } from 'lodash'

// 正确：按需引入 (~1KB gzip)
import debounce from 'lodash/debounce'
// 或使用 lodash-es 的 ES Module 版本
import { debounce } from 'lodash-es'

Element Plus等UI组件库的按需引入：

# 安装自动导入插件
npm install -D unplugin-vue-components unplugin-auto-import

# vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({ resolvers: [ElementPlusResolver()] }),
    Components({ resolvers: [ElementPlusResolver()] })
  ]
})

配置后组件和指令按需自动导入，Element Plus打包体积从全量的~350KB降到仅包含使用到的组件。

路由级代码分割与预加载

Vue Router的懒加载是最直接的首屏优化手段。将每个路由页面拆分为独立chunk：

// router/index.ts
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import('@/views/Settings.vue')
  },
  {
    path: '/report',
    component: () => import('@/views/Report.vue')
  }
]

进一步的优化是”预加载”——用户鼠标悬停在导航链接上时提前加载目标页面：

// composables/usePreload.ts
export function usePreload() {
  const preload = (importFn: () => Promise) => {
    importFn()
  }
  return { preload }
}

// 导航组件中使用
<router-link
  to="/report"
  @mouseenter="preload(() => import('@/views/Report.vue'))"
>报表</router-link>

Vite的预加载策略也可以通过modulePreload配置：

// vite.config.ts
export default defineConfig({
  build: {
    modulePreload: {
      polyfill: false  // 不注入预加载polyfill（现代浏览器已原生支持）
    }
  }
})

虚拟列表与大数据渲染优化

当列表数据超过500条时，直接渲染会导致明显的卡顿。虚拟列表只渲染可视区域内的DOM节点：

// 使用 @vueuse/core 的 useVirtualList
import { useVirtualList } from '@vueuse/core'

const { list, containerProps, wrapperProps } = useVirtualList(
  largeDataArray,
  { itemHeight: 48, overscan: 5 }
)

// 模板
<div v-bind="containerProps" style="height: 600px; overflow: auto;">
  <div v-bind="wrapperProps">
    <div
      v-for="{ data, index } in list"
      :key="index"
      style="height: 48px"
    >
      {{ data.name }}
    </div>
  </div>
</div>

对于更复杂的场景（不等高、树形结构），可以使用vue-virtual-scroller或vxe-table的虚拟滚动模式。

另一个高频场景是组件的频繁重渲染。Vue3的shallowRef和markRaw可以阻止不必要的深层响应式：

// 大型只读数据不需要深度响应式
const chartData = shallowRef(largeDataset)

// 第三方实例不需要代理
const editor = markRaw(new EditorInstance())
const editorRef = shallowRef(editor)

图片与资源加载优化

静态资源是首屏加载的大头，Vite默认会对图片和字体做hash命名实现长效缓存。但还需要：

// vite.config.ts - 图片压缩
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      svgo: { plugins: [{ removeViewBox: false }] }
    })
  ]
})

图片懒加载用原生属性即可：

<img
  :src="item.imageUrl"
  loading="lazy"
  decoding="async"
  :width="800"
  :height="600"
/>

loading="lazy"让浏览器在图片进入视口附近才加载，decoding="async"避免解码阻塞主线程。设置width/height属性防止布局抖动（CLS优化）。

运行时性能：Computed缓存与事件防抖

Vue3的computed自带缓存，但嵌套过深或依赖频繁变化会丧失缓存优势：

// 不好：每次filter执行都创建新数组引用，触发下游重渲染
const filteredList = computed(() =>
  props.items.filter(item => item.status === activeStatus.value)
)

// 优化：用 useMemoize 缓存计算结果
import { useMemoize } from '@vueuse/core'
const getFilteredItems = useMemoize((status: string) =>
  props.items.filter(item => item.status === status)
)
const filteredList = computed(() =>
  getFilteredItems(activeStatus.value)
)

搜索输入等高频事件必须防抖：

import { useDebounceFn } from '@vueuse/core'

const onSearch = useDebounceFn((keyword: string) => {
  // 发起搜索请求
  fetchSearchResults(keyword)
}, 300)

Vue3项目性能优化不是单点改动，而是从构建产物（Tree-Shaking、代码分割）、运行时（虚拟列表、shallowRef）、资源加载（图片优化、预加载策略）到代码细节（computed缓存、防抖）的系统工程。每个优化的效果需要通过Lighthouse评分和Core Web Vitals指标来量化验证。