代码层面

• v-for 使用 key（有利于列表变动时，尽量少的删除、新增、改动元素）
• 合理使用冻结对象（提升效率 Object.freeze(obj)，冻结的对象不会响应式）
• 使用函数式组件（减少组件初始化的过程，内存更少，不会创建实例对象）
• 使用计算属性（某个数据多次使用，并且数据时通过计算得到的，通过计算属性进行缓存）
• 非实时绑定的表单项（v-modal会导致数据实时变化，会导致重渲染，合理使用lazy避免）
• 保持对象引用稳定（避免获取到的新数据重新赋值给对象，导致引用变化，页面重新渲染）
• 合理使用 v-show 和 v-if
• 使用延迟装载defer（利用 requestAnimationFrame 事件分批渲染内容）

// 定义
export default function deferMixins (maxFrameCount) {
  return {
    data() {
      return {
        frameCount: 0
      }
    },
  },
  mounted() {
    function refreshFrameCount() {
      requestAnimationFrame(() => {
        this.frameCount++
        if (this.frameCount < maxFrameCount)
          refreshFrameCount()
      })
    }
    refreshFrameCount()
  },
  methods: {
    defer(showInFrameCount) {
      return this.frameCount >= showInFrameCount
    }
  }
}

// 使用
deferMixins(10) // 分是个片段
<div v-if="defer(1)"> <CustomComp /> </div> // 片段1时渲染
<div v-if="defer(10)"> <CustomComp /> </div> // 片段10时渲染

• 使用 KeepAlive 复用组件（避免组件重复的创建、销毁带来的性能损耗）
• 长列表优化
• 及时清除组件中的副作用（比如 setInterval 等）

配置构建

• 打包体积优化
• 组件按需加载
• 组件异步加载
• 路由懒加载
• 生产环境排除打包使用CDN
• 打包移除日志打印