Vue3 性能工程工具箱：虚拟列表、Worker、构建与预算

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({ items: Array, itemHeight: { type: Number, default: 56 } });

const container = ref(null);
const scrollTop = ref(0);

const visibleCount = computed(() =>
  Math.ceil((container.value?.clientHeight ?? 600) / props.itemHeight) + 2  // 上下各多渲染 1 条缓冲
);
const startIndex = computed(() => Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - 1));
const visibleItems = computed(() =>
  props.items.slice(startIndex.value, startIndex.value + visibleCount.value)
);
const offsetY = computed(() => startIndex.value * props.itemHeight);
</script>

<template>
  <div
    ref="container"
    class="virtual-list"
    @scroll="scrollTop = $event.target.scrollTop"
  >
    <!-- 撑起真实滚动高度的隐形占位 -->
    <div :style="{ height: items.length * itemHeight + 'px' }" />
    <div class="viewport" :style="{ transform: `translateY(${offsetY}px)` }">
      <div
        v-for="item in visibleItems"
        :key="item.id"
        :style="{ height: itemHeight + 'px' }"
      >
        <slot :item="item" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.virtual-list { height: 600px; overflow-y: auto; position: relative; }
.viewport { position: absolute; top: 0; left: 0; right: 0; }
</style>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
</script>

<template>
  <RecycleScroller
    :items="users"
    :item-size="60"
    key-field="id"
    :buffer="200"
    class="scroller"
  >
    <template #default="{ item }">
      <UserRow :user="item" />
    </template>
  </RecycleScroller>
</template>

// workers/stats.worker.ts
self.onmessage = (e) => {
  const { docs } = e.data;
  // 重活在这里：分类统计、聚合，几百毫秒也不影响主线程
  const byCategory = docs.reduce((acc, d) => {
    acc[d.category] = (acc[d.category] ?? 0) + 1;
    return acc;
  }, {});
  self.postMessage(byCategory);
};

<script setup>
import { ref, onUnmounted } from 'vue';
import StatsWorker from '@/workers/stats.worker.ts?worker';   // Vite 编译为独立 chunk

const result = ref(null);
const worker = new StatsWorker();

worker.onmessage = (e) => {
  result.value = e.data;
  computing.value = false;
};
onUnmounted(() => worker.terminate());   // 组件卸载必须终止，否则线程泄漏
</script>

// composables/useCachedFetch.ts
import { ref, shallowRef } from 'vue';

const cache = new Map();          // url -> Promise（进行中或已完成）

export function useCachedFetch(url) {
  const data = shallowRef(null);
  const error = ref(null);

  async function load() {
    if (!cache.has(url.value)) {
      // 去重：进行中的请求直接复用同一个 Promise
      cache.set(
        url.value,
        fetch(url.value).then((r) => {
          if (!r.ok) throw new Error(`HTTP ${r.status}`);
          return r.json();
        })
      );
    }
    try {
      data.value = await cache.get(url.value);
    } catch (e) {
      cache.delete(url.value);    // 失败不缓存，允许重试
      error.value = e;
    }
  }

  load();
  return { data, error, reload: load };
}

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { visualizer } from 'rollup-plugin-visualizer';
import { compression } from 'vite-plugin-compression2';

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ filename: 'dist/stats.html', gzipSize: true }),  // 构建后生成体积报告
    compression({ algorithm: 'gzip' }),                            // 产出 .gz 静态压缩文件
  ],
  build: {
    rollupOptions: {
      output: {
        // 把稳定的第三方库拆成独立 chunk，业务迭代不再打散它们的缓存
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          charts: ['echarts'],
        },
      },
    },
  },
});

// .lighthouserc.json
{
  "ci": {
    "collect": {
      "startServerCommand": "npm run preview",
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["error", { "maxNumericValue": 300 }]
      }
    }
  }
}

# .github/workflows/performance.yml
name: Performance Budget
on: [pull_request]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          config-path: ./.lighthouserc.json

<!-- index.html：预加载首屏大图与关键接口（prefetch 则是"下一页可能用"，优先级更低） -->
<link rel="preload" href="/images/hero.jpg" as="image" />
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

build: {
  minify: 'terser',
  terserOptions: {
    compress: { drop_console: true, drop_debugger: true },
  },
}

import { debounce } from 'lodash-es'   // 只打包 debounce
import _ from 'lodash'                  // 反例：全量进包