Vue 性能优化

渲染、列表、缓存、首屏、构建产物和运行时性能治理。

本章内容

• 有哪些 Vue 性能优化的方法？
• 使用 Vue 渲染大量数据时，如何进行优化？
• 如何解决 Vue 打包时 vendor 文件过大的问题？
• 如何解决 SPA 单页应用首屏加载速度慢的问题？
• Vue 如何优化网站首页的加载速度？
• 如何优化 Webpack 打包 Vue 应用的速度？
• 如何解决 Vue 初始化页面闪动的问题？

高级性能专题

• 如何建立 Vue 应用的性能预算和持续回归机制？
• Vue 性能问题应该如何区分加载性能、更新性能和运行时性能？
• Vue3 中如何通过 shallowRef、shallowReactive 和 markRaw 控制响应式成本？
• computed 稳定性如何影响 Vue3 组件更新？
• Vue 组件为什么会被不必要地更新？如何优化父子组件更新传播？
• v-once、v-memo 和静态提升分别适合什么场景？
• Vue 中深度 watch 为什么可能造成严重性能问题？如何替代？
• Vue 中 watch 的 flush 时机如何影响性能和布局？
• Vue 事件处理和渲染函数中如何避免大量临时对象与函数分配？
• Vue 页面频繁更新时，如何避免布局抖动和强制同步布局？
• Vue 中的高频输入、滚动和拖拽如何设计，才能改善 INP？
• Vue 项目中哪些计算应该放到 Web Worker？如何设计数据传输？
• Vue 组件库如何避免主题、图标和 CSS 设计导致的运行时性能问题？
• 如何定位 Vue 页面内存泄漏，并建立卸载后的资源治理？