Vue 的性能优化

发表于 更新于 分类于

  • 编码阶段
    尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher

  • v-if 和 v-for 不能连用
    如果需要使用 v-for 给每项元素绑定事件时使用事件代理

  • SPA 页面采用 keep-alive 缓存组件

  • 在更多的情况下，使用 v-if 替代 v-show

  • key 保证唯一

  • 使用路由懒加载、异步组件

  • 防抖、节流

  • 第三方模块按需导入

  • 长列表滚动到可视区域动态加载

  • 图片懒加载

  • SEO 优化

    • 预渲染
    • 服务端渲染 SSR

  • 打包优化

    • 压缩代码
    • Tree Shaking/Scope Hoisting
    • 使用 cdn 加载第三方模块
    • 多线程打包 happypack
    • splitChunks 抽离公共文件
    • sourceMap 优化

  • 用户体验

    骨架屏
    PWA

  • 使用缓存（客户端缓存、服务端缓存）优化、服务端开启 gzip 压缩等。