Vue 性能优化实战指南

<template>
  <div>
    <!-- 频繁切换，使用 v-show -->
    <div v-show="isVisible">频繁切换的内容</div>
    <button @click="isVisible = !isVisible">切换</button>

    <!-- 不常切换，使用 v-if -->
    <div v-if="hasPermission">需要权限的内容</div>

    <!-- 需要生命周期钩子，使用 v-if -->
    <ChildComponent v-if="shouldRender" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      hasPermission: false,
      shouldRender: false
    };
  }
};
</script>

<!-- ❌ 不推荐：v-for 与 v-if 同时使用 -->
<template>
  <ul>
    <li v-for="item in items" v-if="item.visible" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<!-- ✅ 推荐：使用计算属性提前过滤（带缓存，只算一次） -->
<template>
  <ul>
    <li v-for="item in visibleItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  props: { items: Array },
  computed: {
    visibleItems() {
      return this.items.filter((item) => item.visible);
    }
  }
};
</script>

<!-- ✅ 推荐：用 template 包裹，分离两个指令 -->
<template>
  <ul>
    <template v-for="item in items" :key="item.id">
      <li v-if="item.visible">{{ item.name }}</li>
    </template>
  </ul>
</template>

<template>
  <div>
    <!-- ❌ 不推荐：使用 index 作为 key，增删排序会出错 -->
    <div v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </div>

    <!-- ✅ 推荐：使用唯一 ID 作为 key -->
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>

    <!-- ✅ 推荐：无唯一 ID 时用稳定字段组合 -->
    <div v-for="item in items" :key="item.type + '-' + item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<template>
  <div
    v-for="item in list"
    :key="item.id"
    v-memo="[item.id === selectedId]"
  >
    <!-- 只有 '是否被选中' 状态变化时才重新渲染这一行 -->
    <p :class="{ active: item.id === selectedId }">{{ item.name }}</p>
  </div>
</template>

<script setup>
import { VirtualList } from '@tanstack/vue-virtual';
// 或使用 vue-virtual-scroller
</script>

<template>
  <!-- 10 万条数据，DOM 中始终只有约 20 个节点 -->
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row">{{ item.name }}</div>
  </RecycleScroller>
</template>

<!-- Vue 2 函数式组件 -->
<template functional>
  <div :class="['btn', props.type]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  functional: true,
  props: { type: String }
};
</script>

// Vue 3 函数式组件（用普通函数 + h）
import { h } from 'vue';

const MyButton = (props, { slots }) =>
  h('div', { class: ['btn', props.type] }, slots.default());

MyButton.props = ['type'];
export default MyButton;

import { defineAsyncComponent } from 'vue';

// 基础用法
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/HeavyChart.vue')
);

// 完整配置：带加载态、错误态、超时
const AsyncComponentWithState = defineAsyncComponent({
  loader: () => import('./components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorFallback,
  delay: 200,      // 延迟 200ms 才显示 loading，避免闪烁
  timeout: 3000    // 超过 3s 视为加载失败
});

<template>
  <div>
    <!-- include 白名单，max 限制最多缓存数量避免内存膨胀 -->
    <keep-alive :include="['Home', 'About']" :max="10">
      <router-view />
    </keep-alive>

    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  </div>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue';

// keep-alive 组件专属的两个钩子
onActivated(() => {
  console.log('组件被激活（从缓存恢复），可在此刷新数据');
});
onDeactivated(() => {
  console.log('组件被缓存（切走），可在此暂停定时器');
});
</script>

import { ref, reactive } from 'vue';

// ref：基本类型、需要整体替换的对象
const count = ref(0);
const user = ref({ name: 'Alice' });
user.value = { name: 'Bob' }; // ✅ 整体替换仍响应式

// reactive：结构稳定的复杂对象
const state = reactive({
  user: { name: 'Alice', age: 25 },
  settings: { theme: 'dark' }
});
// state = {...}  ❌ 这样会丢失响应式

import { shallowRef, shallowReactive, triggerRef } from 'vue';

// 只代理第一层，内部对象不做响应式转换
const largeList = shallowRef([]);

const loadData = async () => {
  const data = await fetchHugeData(); // 5 万条
  largeList.value = data;             // 替换整体会触发更新
};

// 若原地修改内部内容，需手动触发
const appendItem = (item) => {
  largeList.value.push(item);
  triggerRef(largeList); // 手动通知视图更新
};

import { ref, markRaw } from 'vue';

// Object.freeze：冻结静态配置/大列表
const staticOptions = Object.freeze([
  { value: 1, label: '选项 1' },
  { value: 2, label: '选项 2' }
  // ... 大量静态数据
]);

// markRaw：标记不需要响应式的实例
const chart = ref(null);
const initChart = (ctx, config) => {
  // 避免 Vue 递归代理庞大的图表实例
  chart.value = markRaw(new Chart(ctx, config));
};

import { ref, computed, watch, watchEffect } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

// computed：有缓存，多次读取只算一次
const fullName = computed(() => {
  console.log('computed called');
  return `${firstName.value} ${lastName.value}`;
});

// watch：适合执行副作用，可拿到新旧值
watch([firstName, lastName], ([newFirst], [oldFirst]) => {
  console.log('姓名从', oldFirst, '变为', newFirst);
  // 例如：发起搜索请求
});

// watchEffect：自动收集依赖，立即执行一次
watchEffect(() => {
  console.log('当前全名:', firstName.value, lastName.value);
});

// 路由懒加载
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
];

// 动态导入组件
const loadComponent = (name) => () => import(`@/components/${name}.vue`);
const Header = loadComponent('Header');

// ❌ 不推荐：导入整个 lodash（约 70KB）
import _ from 'lodash';
_.debounce(() => {}, 300);

// ✅ 推荐：按需导入 ES 版本（只打包用到的函数）
import { debounce } from 'lodash-es';
debounce(() => {}, 300);

// ✅ 更推荐：自动按需导入插件
// unplugin-auto-import + unplugin-vue-components

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { visualizer } from 'rollup-plugin-visualizer';
import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({ algorithm: 'gzip' }), // 生成 .gz，配合服务器减小传输体积
    visualizer({ open: true })              // 打包分析，找出体积大户
  ],
  build: {
    rollupOptions: {
      output: {
        // 手动分包：把稳定的第三方库单独拆出，利于长期缓存
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'echarts-vendor': ['echarts'],
          'lodash-vendor': ['lodash-es']
        }
      }
    },
    chunkSizeWarningLimit: 1000,
    minify: 'esbuild' // esbuild 压缩，速度快
  },
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  }
});

<script setup>
import { onMounted, onUnmounted } from 'vue';

let timer = null;
let observer = null;

onMounted(() => {
  timer = setInterval(() => console.log('tick'), 1000);

  observer = new IntersectionObserver((entries) => console.log(entries));
  observer.observe(document.querySelector('#target'));

  window.addEventListener('resize', handleResize);
});

const handleResize = () => console.log('resize');

onUnmounted(() => {
  if (timer) clearInterval(timer);       // 清理定时器
  if (observer) observer.disconnect();   // 清理观察者
  window.removeEventListener('resize', handleResize); // 移除监听
});
</script>

import { reactive, onUnmounted } from 'vue';

// ✅ 用标志位避免组件卸载后仍操作已销毁的状态
export default {
  setup() {
    const state = reactive({ count: 0 });
    let cancelled = false;

    onUnmounted(() => {
      cancelled = true;
    });

    setTimeout(() => {
      if (!cancelled) state.count++;
    }, 5000);
  }
};

// 测量任意函数耗时
const measure = (name, fn) => {
  const start = performance.now();
  fn();
  const end = performance.now();
  console.log(`${name} 耗时 ${(end - start).toFixed(2)}ms`);
};

// 测量异步请求耗时
const measureAsync = async (name, fn) => {
  const start = performance.now();
  const result = await fn();
  console.log(`${name} 请求耗时 ${(performance.now() - start).toFixed(2)}ms`);
  return result;
};

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => console.log('LCP:', metric.value)); // 应 < 2.5s
onINP((metric) => console.log('INP:', metric.value)); // 应 < 200ms
onCLS((metric) => console.log('CLS:', metric.value)); // 应 < 0.1

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

const imgRefs = ref([]);
let observer = null;

onMounted(() => {
  observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // 真正开始加载
        observer.unobserve(img);   // 加载后停止观察
      }
    });
  }, { rootMargin: '200px' }); // 提前 200px 开始加载，避免用户看到空白

  imgRefs.value.forEach((img) => observer.observe(img));
});

onUnmounted(() => observer && observer.disconnect());
</script>

<template>
  <img
    v-for="(item, i) in list"
    :key="item.id"
    :ref="el => imgRefs[i] = el"
    :data-src="item.url"
    src="data:image/svg+xml,%3Csvg/%3E"
    alt=""
  />
</template>

<img src="photo.jpg" loading="lazy" alt="示例图片" />

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="首图" width="1200" height="600" />
</picture>

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="响应式图片"
/>

// vite 中用 vite-plugin-svg-icons 批量注册 SVG
import 'virtual:svg-icons-register';
// 使用：<svg><use href="#icon-search" /></svg>

// 并发池：控制最大同时请求数
async function concurrentPool(tasks, limit = 5) {
  const results = [];
  const executing = new Set();
  for (const task of tasks) {
    const p = Promise.resolve().then(() => task());
    results.push(p);
    executing.add(p);
    p.finally(() => executing.delete(p));
    if (executing.size >= limit) {
      await Promise.race(executing); // 等最快的一个完成再继续
    }
  }
  return Promise.all(results);
}

const cache = new Map();

function cachedRequest(url, ttl = 60000) {
  const now = Date.now();
  const hit = cache.get(url);
  if (hit && now - hit.time < ttl) {
    return hit.promise; // 命中缓存，直接返回同一个 Promise
  }
  const promise = fetch(url).then((r) => r.json());
  cache.set(url, { promise, time: now });
  // 请求失败则清除缓存，允许重试
  promise.catch(() => cache.delete(url));
  return promise;
}

function debounce(fn, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function throttle(fn, interval = 200) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 搜索防抖：用户停止输入 300ms 后才发请求
const onSearch = debounce((keyword) => fetchSuggestions(keyword), 300);

async function loadPage() {
  // 关键数据：阻塞首屏，必须先拿到
  const main = await fetchMainContent();
  render(main);
  // 次要数据：不阻塞，空闲时加载
  requestIdleCallback(() => {
    fetchRecommendations();
    fetchComments();
  });
}

<template>
  <div v-if="loading" class="skeleton">
    <div class="skeleton-title"></div>
    <div class="skeleton-line" v-for="n in 5" :key="n"></div>
  </div>
  <ArticleList v-else :list="list" />
</template>

<style>
.skeleton-line {
  height: 16px;
  margin: 8px 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
</style>

<!-- 预连接第三方域名，提前完成 DNS + TLS 握手 -->
<link rel="preconnect" href="https://api.example.com" />
<!-- 预加载首屏关键字体，避免文字闪烁 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<!-- 预取下个页面可能用到的资源 -->
<link rel="prefetch" href="/js/detail.chunk.js" />

// Nuxt 3 中对非关键组件延迟水合的思路
import { defineAsyncComponent } from 'vue';

const HeavyChart = defineAsyncComponent(() =>
  import('@/components/HeavyChart.vue')
);
// 图表组件只在滚动到可视区时才加载与水合，减少首屏 JS 执行时间

<template>
  <keep-alive :include="['UserList', 'OrderList']" :max="10">
    <component :is="currentTab" />
  </keep-alive>
</template>

import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  // 每次重新进入（从缓存激活）时执行，适合刷新数据
  refreshDataIfStale();
});
onDeactivated(() => {
  // 离开但未销毁时执行，适合暂停定时器/视频
  pauseTimers();
});

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="$route.fullPath" />
    </keep-alive>
  </router-view>
</template>

<template>
  <!-- 版权信息只渲染一次，后续任何更新都跳过它 -->
  <footer v-once>
    © 2026 我的公司 版权所有 · 备案号 XXX
  </footer>
</template>

<template>
  <div
    v-for="item in list"
    :key="item.id"
    v-memo="[item.id === selectedId]"
  >
    <!-- 只有"是否被选中"变化时才重新渲染这一项 -->
    <ExpensiveRow :item="item" :active="item.id === selectedId" />
  </div>
</template>

<!-- 反例：计时器变化导致整个大组件重渲染 -->
<template>
  <div>
    <ExpensiveStaticList :data="hugeData" />
    <span>{{ seconds }}</span> <!-- 每秒变化 -->
  </div>
</template>

<!-- 正例：把计时器抽成独立子组件 -->
<template>
  <div>
    <ExpensiveStaticList :data="hugeData" />
    <TimerDisplay /> <!-- 只有它自己每秒重渲染 -->
  </div>
</template>

import { reactive, watch } from 'vue';

const form = reactive({ /* 100+ 字段 */ });

// 反例：deep 深度监听整个大表单，任何字段变化都触发昂贵回调
watch(form, expensiveValidate, { deep: true });

// 正例：只监听真正需要联动的字段
watch(() => form.province, (val) => loadCities(val));
watch(() => [form.price, form.count], ([p, c]) => (form.total = p * c));

import { debounce } from 'lodash-es';

// 输入时不实时校验，停止输入 300ms 或失焦时才校验
const validateField = debounce((field) => runRules(field), 300);

<template>
  <section v-for="step in steps" :key="step.id">
    <!-- 只渲染当前步骤，其余步骤不挂载 -->
    <FormStep v-if="step.id === currentStep" :fields="step.fields" />
  </section>
</template>

// 1) 路由全量懒加载 + 按业务分包
const routes = [
  { path: '/dashboard', component: () => import(/* webpackChunkName: "dash" */ '@/views/Dashboard.vue') },
  { path: '/report', component: () => import(/* webpackChunkName: "report" */ '@/views/Report.vue') }
];

// 2) 第三方大库按需引入 + 分包
// echarts 只引入用到的图表类型，体积从 1MB 降到 300KB
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);

// 关键接口先渲染，报表数据延迟到组件可见时再拉
async function initDashboard() {
  const summary = await fetchSummary(); // 关键，阻塞首屏
  render(summary);
  requestIdleCallback(() => {
    fetchReport();       // 次要
    fetchNotifications();
  });
}

<!-- 5000 行表格改虚拟滚动，只渲染可视区约 20 行 -->
<VirtualTable :data="rows" :item-height="44" :visible-count="20" />

import { shallowRef, triggerRef } from 'vue';
const chartData = shallowRef([]);
function updateChart(data) {
  chartData.value = data;
  triggerRef(chartData); // 手动触发一次更新
}

<router-view v-slot="{ Component }">
  <keep-alive :include="['Report', 'UserList']" :max="8">
    <component :is="Component" />
  </keep-alive>
</router-view>

<script setup>
import { ref, computed } from 'vue';
const list = ref([/* 大量数据 */]);
const keyword = ref('');

// 正确：computed 缓存，只有 list 或 keyword 变才重算
const filtered = computed(() =>
  list.value.filter((x) => x.name.includes(keyword.value))
);
</script>

<template>
  <!-- 反例：模板里调用方法，每次任意响应式变化都会重新过滤 -->
  <!-- <div v-for="x in filterList()">... -->

  <!-- 正例：使用 computed -->
  <div v-for="x in filtered" :key="x.id">{{ x.name }}</div>
</template>

import { watch } from 'vue';

// 1) 避免不必要的 deep
// 反例：deep 会递归遍历整个对象建立依赖，大对象开销巨大
watch(bigObject, cb, { deep: true });
// 正例：只监听真正关心的字段
watch(() => bigObject.status, cb);

// 2) flush 时机：post 在 DOM 更新后，pre（默认）在更新前
watch(source, cb, { flush: 'post' }); // 需要读取更新后 DOM 时

// 3) 一次性监听后自动停止
const stop = watch(source, (val) => {
  if (val === 'ready') {
    doSomething();
    stop(); // 满足条件后停止，避免持续监听
  }
});

import { watchEffect } from 'vue';

watchEffect((onCleanup) => {
  const controller = new AbortController();
  fetch(`/api/search?q=${keyword.value}`, { signal: controller.signal })
    .then((r) => r.json())
    .then((data) => (results.value = data));
  // 下次触发前取消上一次请求
  onCleanup(() => controller.abort());
});

import { shallowRef, markRaw } from 'vue';

// 地图实例用 markRaw 包裹，避免 Vue 代理它内部庞大的属性
const map = markRaw(new AMap.Map('container'));

// 5万行表格数据用 shallowRef，整体替换而非逐项代理
const tableData = shallowRef([]);
tableData.value = await fetchHugeData(); // 触发更新

<template>
  <!-- 反例：1000 个 @click，1000 个监听器 -->
  <!-- <li v-for="item in list" @click="handle(item)"> -->

  <!-- 正例：父级一个监听，利用 data 属性识别 -->
  <ul @click="onListClick">
    <li v-for="item in list" :key="item.id" :data-id="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
function onListClick(e) {
  const li = e.target.closest('li[data-id]');
  if (li) handle(li.dataset.id);
}
</script>

// 反例：读-写交替，每次写后读都强制重排
elements.forEach((el) => {
  const w = el.offsetWidth; // 读，触发重排
  el.style.width = w + 10 + 'px'; // 写
});

// 正例：先全部读，再全部写
const widths = elements.map((el) => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

// 告诉浏览器不会调用 preventDefault，浏览器可立即滚动不必等待
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('touchmove', onMove, { passive: true });

// worker.js
self.onmessage = (e) => {
  const { rows } = e.data;
  // 复杂聚合计算不阻塞主线程
  const result = heavyAggregate(rows);
  self.postMessage(result);
};

// 组件中使用（Vite 原生支持 ?worker）
import MyWorker from './worker.js?worker';

const worker = new MyWorker();
function process(rows) {
  return new Promise((resolve) => {
    worker.onmessage = (e) => resolve(e.data);
    worker.postMessage({ rows });
  });
}

// 使用
const result = await process(hugeRows); // 主线程保持流畅

/* 反例：改 left/top/width 会触发重排，代价高 */
.box { transition: left 0.3s; }

/* 正例：用 transform，只在合成阶段处理 */
.box { transition: transform 0.3s; }
.box.move { transform: translateX(100px); }

// 反例：setInterval 与刷新率不同步，可能丢帧或过度渲染
// 正例：rAF 与屏幕刷新对齐，标签页隐藏时自动暂停省电
function animate() {
  updatePosition();
  if (!done) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

el.addEventListener('mouseenter', () => (el.style.willChange = 'transform'));
el.addEventListener('animationend', () => (el.style.willChange = 'auto'));

// 分批处理大数组，每批之后让出主线程
async function processInChunks(items, handler, chunkSize = 500) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(handler);
    // 让出主线程，浏览器可插入响应用户输入的机会
    await new Promise((resolve) => {
      if ('requestIdleCallback' in window) {
        requestIdleCallback(resolve);
      } else {
        setTimeout(resolve, 0);
      }
    });
  }
}

// 处理 10 万条数据渲染标签
await processInChunks(bigList, (item) => buildTag(item), 500);

import { onMounted, onUnmounted } from 'vue';

let timer, observer, controller;

onMounted(() => {
  timer = setInterval(poll, 5000);
  observer = new ResizeObserver(onResize);
  observer.observe(el.value);
  controller = new AbortController();
  window.addEventListener('resize', onResize, { signal: controller.signal });
});

onUnmounted(() => {
  clearInterval(timer);            // 清定时器
  observer.disconnect();           // 断开观察者
  controller.abort();              // 一次性移除所有绑定的监听
});

# Vite 项目
npm i -D rollup-plugin-visualizer
# 打包后生成可视化的体积分布图，一眼看出谁最大

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';
export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

// 反例：整包引入 lodash，约 70KB
import _ from 'lodash';
// 正例：按需引入或用 lodash-es 配合 tree-shaking，只打进用到的函数
import debounce from 'lodash-es/debounce';

// moment（约 300KB）替换为 dayjs（约 2KB）
import dayjs from 'dayjs';

// 用 storeToRefs 只订阅需要的字段，避免整个 store 变化都触发组件更新
import { storeToRefs } from 'pinia';
const { userName, avatar } = storeToRefs(useUserStore());

// 大列表数据放 shallowRef 或 markRaw，避免深层代理
import { defineStore } from 'pinia';
import { shallowRef } from 'vue';
export const useDataStore = defineStore('data', () => {
  const bigList = shallowRef([]);
  return { bigList };
});

{
  "budget": {
    "首屏JS": "300KB",
    "首屏总资源": "1MB",
    "LCP": "2.5s",
    "INP": "200ms",
    "CLS": "0.1"
  }
}

# 用 lighthouse-ci 在 PR 中自动跑分，低于阈值则失败
- name: Lighthouse CI
  run: |
    npm i -g @lhci/cli
    lhci autorun --assert.assertions.categories:performance=0.9

import { onLCP, onINP, onCLS } from 'web-vitals';

function report(metric) {
  navigator.sendBeacon('/analytics', JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating // good / needs-improvement / poor
  }));
}
onLCP(report);
onINP(report);
onCLS(report);

import { defineAsyncComponent } from 'vue';

const AsyncChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,   // 加载中显示
  errorComponent: LoadError,          // 加载失败显示
  delay: 200,                         // 200ms 后才显示 loading，避免闪烁
  timeout: 10000,                     // 超过 10s 判定失败
  onError(error, retry, fail, attempts) {
    // 最多自动重试 3 次
    if (attempts <= 3) retry();
    else fail();
  }
});

<template>
  <Suspense>
    <template #default>
      <UserProfile />  <!-- 内部 async setup 请求用户数据 -->
    </template>
    <template #fallback>
      <SkeletonProfile />
    </template>
  </Suspense>
</template>

<script setup>
// 子组件 UserProfile.vue 的 async setup
// const user = await fetchUser();  顶层 await 会被 Suspense 捕获
</script>

// 纯展示的列表项，用函数式渲染更省
import { h } from 'vue';
const ListItem = (props) => h('li', { class: 'item' }, props.text);

<head>
  <style>/* 首屏关键 CSS 内联，浏览器无需等待外部文件 */</style>
  <!-- 非关键 CSS 异步加载 -->
  <link rel="preload" href="/main.css" as="style" onload="this.rel='stylesheet'" />
</head>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my.woff2') format('woff2'); /* woff2 体积最小 */
  font-display: swap; /* 先用后备字体显示，字体到位后替换，避免白屏 */
}

/* 系统字体栈：零下载，直接用设备自带字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
}

.card {
  contain: content; /* 告诉浏览器该元素内部变化不影响外部布局 */
}

# Nginx 开启 brotli（比 gzip 再小约 15%~20%）
brotli on;
brotli_types text/plain text/css application/javascript application/json;
brotli_comp_level 6;

# 兜底 gzip
gzip on;
gzip_types text/css application/javascript application/json;

location ~* \.(js|css|woff2|png|webp)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
}
# HTML 不缓存或短缓存，保证能拿到最新的资源引用
location = /index.html {
  add_header Cache-Control "no-cache";
}

// 用 Workbox 缓存静态资源，二次访问秒开甚至离线可用
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

// 图片走缓存优先
registerRoute(({ request }) => request.destination === 'image', new CacheFirst());
// API 走网络优先，失败回退缓存
registerRoute(({ url }) => url.pathname.startsWith('/api/'), new NetworkFirst());

// vite-plugin-prerender 在构建时把指定路由渲染成静态 HTML
// 用户和爬虫拿到的是含内容的 HTML，JS 到位后接管交互
export default {
  plugins: [
    prerender({ routes: ['/', '/about', '/pricing'] })
  ]
};

1. 打开 Performance → 点录制 → 操作页面 → 停止
2. 看 Main 轨道：红色三角标记的是长任务（>50ms）
3. 看 Frames 轨道：红色帧表示掉帧
4. 火焰图从上到下是调用栈，越宽的函数耗时越久
5. Bottom-Up 视图按耗时排序，快速找到最慢的函数

□ 新增依赖体积是否可接受？有无更轻替代？
□ 是否有 deep watch 大对象的隐患？
□ 是否有可能造成内存泄漏的订阅/监听？
□ 是否有阻塞首屏的同步大计算？
□ 是否有会造成 CLS 的动态内容插入？

// 顶层提供，任意深度后代直接注入，中间层不参与传递
import { provide, inject, readonly, ref } from 'vue';

// 祖先组件
const theme = ref('dark');
provide('theme', readonly(theme)); // readonly 防止后代误改

// 深层后代组件
const theme = inject('theme');

<script setup>
import { computed } from 'vue';
// 反例：内联对象每次渲染都是新引用
// <Child :config="{ size: 'lg' }" />

// 正例：用 computed 或常量稳定引用
const config = computed(() => ({ size: 'lg' }));
</script>

<template>
  <Child :config="config" />
</template>

// 对不依赖用户态的组件（如页脚、导航）做服务端缓存，避免重复渲染
import LRU from 'lru-cache';
const cache = new LRU({ max: 1000, ttl: 1000 * 60 });
// 渲染前查缓存，命中直接返回 HTML 片段

// 正确：工厂函数，每个请求独立实例
export function createApp() {
  const app = createSSRApp(App);
  const router = createRouter({ history: createMemoryHistory() });
  const pinia = createPinia();
  app.use(router).use(pinia);
  return { app, router, pinia };
}

// 共享公共依赖，避免每个子应用重复打包 Vue（可省数百 KB×N）
// 主应用暴露，子应用通过 externals 引用
window.__shared__ = { Vue, VueRouter, Pinia };

// Vue 生产构建会自动 tree-shake 掉警告代码，但需确认打包环境正确
// vite.config.js 中确保 mode 为 production
// 手动构建时定义特性标志，去掉 devtools 和 warning 代码
define: {
  __VUE_OPTIONS_API__: false,        // 不用 Options API 可关闭，减小体积
  __VUE_PROD_DEVTOOLS__: false,      // 生产关闭 devtools 支持
  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
}

// 反例：全局注册几十个组件，全部进主包
// app.component('BigTable', BigTable)

// 正例：局部引入，未用到的会被 tree-shake
import BigTable from '@/components/BigTable.vue';

app.mount('#app');
// 首屏挂载后再初始化非关键 SDK
requestIdleCallback(() => {
  initAnalytics();
  initErrorMonitor();
  initABTest();
});

// 预热下一步可能用到的数据/组件，在空闲时静默完成
requestIdleCallback(() => {
  import('@/views/NextPage.vue');   // 预加载下个页面组件
  prefetchData('/api/next-page');   // 预取下个页面数据
});