Vue项目性能优化：从加载到渲染全攻略

01 性能优化总览 · 核心指标与工具

为什么Vue项目需要性能优化？FCP、LCP、TTI 核心指标，Lighthouse、WebPageTest 衡量工具。

02 构建阶段优化（上） · Tree Shaking & 代码分割

Webpack/Vite 配置优化：Tree Shaking 原理与实践，Code Splitting 与 Dynamic Import。

03 构建阶段优化（下） · 压缩 · Gzip · CDN

TerserPlugin、CSS Minimizer 压缩混淆，Gzip/Brotli 压缩，CDN 加速与 Externals。

04 网络层优化（上） · HTTP/2 · 预加载 · DNS

HTTP/2 与 HTTP/3 协议优势，Preload/Prefetch 资源预加载，dns-prefetch 预解析。

05 网络层优化（下） · 图片 · 字体 · 关键CSS

WebP/AVIF 图片格式、懒加载、响应式图片；Font Display、Subsetting；关键 CSS 内联。

06 运行时优化（上） · 响应式 · shallowRef · computed

Vue 响应式原理与开销，shallowRef、shallowReactive，合理使用 computed 与 watch。

07 运行时优化（下） · v-once · 函数式 · Suspense

v-once 与 v-memo 指令，函数式组件，Suspense 与 defineAsyncComponent 异步组件。

08 虚拟滚动与大数据列表 · 虚拟化 · 无限滚动

虚拟滚动原理（vue-virtual-scroller、vueuc），无限滚动加载，表格虚拟化（vxe-table）。

09 状态管理优化 · Pinia · 持久化 · getters

Pinia/Vuex 模块化设计、持久化策略，避免全局状态滥用，getters 缓存与选择性订阅。

10 路由优化 · 懒加载 · 缓存 · keep-alive

路由懒加载（动态导入），路由元信息 meta 缓存，导航守卫性能，keep-alive 与路由缓存策略。

11 渲染优化（上） · 模板编译 · VNode Diff

模板编译优化（静态提升、预字符串化），VNode Diff 算法优化（PatchFlag、Block Tree）。

12 渲染优化（下） · 防抖 · 节流 · 事件委托

避免不必要的重渲染，事件委托，防抖与节流，shouldComponentUpdate 思路。

13 组件设计优化 · 拆分 · Props · 插槽

组件拆分粒度控制，Props 稳定性，避免深层嵌套，使用 Slot 代替 Render Props。

14 SSR 与 SSG · Nuxt.js · 静态生成 · 缓存

Nuxt.js 的 SSR/SSG 原理，静态站点生成，服务端渲染的缓存策略（Isomorphic）。

15 缓存策略（上） · 浏览器缓存 · Service Worker

强缓存与协商缓存，Service Worker 缓存策略（Cache First、Network First）。

16 缓存策略（下） · LRU · IndexedDB · 请求缓存

内存缓存（LRU 算法），IndexedDB vs localStorage，Axios 缓存适配器。

17 代码质量与性能 · ESLint · 反模式 · TypeScript

ESLint 与 Prettier 配置，避免 v-if 与 v-for 混用等反模式，TypeScript 类型优化。

18 性能监控与告警 · Sentry · Web Vitals · 错误边界

性能监控平台搭建（Sentry、Datadog），自定义 Web Vitals，错误边界 Error Boundary。

19 移动端优化 · 触摸 · 视口 · 离线包

移动端渲染特点，Passive Event Listeners，Viewport 与 rem 适配，离线包方案。

20 微前端与性能 · qiankun · Module Federation

微前端架构性能挑战，子应用加载优化，沙箱隔离与通信开销（qiankun、Module Federation）。

21 Web Worker 与多线程 · 复杂计算 · SharedWorker

Web Worker 在 Vue 中的应用（复杂计算、数据处理），SharedWorker 与 BroadcastChannel。

22 动画性能优化 · CSS动画 · rAF · GPU · Lottie

CSS 动画 vs JS 动画，requestAnimationFrame，GPU 加速（will-change、transform），Lottie。

23 第三方库优化 · 按需加载 · 替代臃肿库

babel-plugin-import、unplugin-vue-components 按需加载，dayjs 替代 moment，虚拟列表库选择。

24 构建工具深度 · Vite ESM · Rollup 插件

Vite 的 ESM 机制，Rollup 插件开发，自定义构建插件（分析包体积、自动分包）。

25 性能测试与调优 · k6 · 压力测试 · 预算

性能测试工具（k6、Artillery），压力测试，性能预算（Performance Budget），CI 门禁。

26 实战案例（上） · 电商首页 · 3秒到1秒

电商首页性能优化——从 3 秒到 1 秒的蜕变：代码分割、图片优化、SSR。

27 实战案例（下） · 后台管理 · 大数据表格

后台管理系统性能优化——大数据表格与复杂表单的优化策略。

28 前沿技术 · Vue 3.3+ · Vapor Mode · Suspense

Vue 3.3+ 新特性（defineModel、defineOptions），Vapor Mode（无虚拟 DOM），Suspense 改进。

29 性能优化误区 · 过早优化 · 忽视体验

过早优化、过度优化、忽略业务场景、忽视用户体验（Perceived Performance）。

30 总结与展望 · 方法论 · WebAssembly · 边缘计算

性能优化方法论总结，未来趋势（WebAssembly、边缘计算、AI 辅助优化），持续学习路径。

Vue项目性能优化从加载到渲染全攻略

Vue项目性能优化
从加载到渲染全攻略