Vue 中常见的性能优化

Question

编码优化

1、不要将所有的数据都放到 data 中，data 中的数据都会增加 getter 和 setter，又会收集 watcher，这样还占内存。

<template>
  <div class="hello">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      list: [1, 2, 3, 4, 5]
    }
  }
}
</script>

如果你的数据不需要响应式的改变，代码可以优化成这样子：

<template>
  <div class="hello">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {}
  },
  created () {
    this.list = [1, 2, 3, 4, 5]
  }
}
</script>

2、v-for 绑定事件的时候可以使用事件代理，将事件绑定到外层元素上，比如下面 todo 方法绑定在 ul 元素中，而不是 li 元素。

<template>
  <div class="hello">
    <ul @click="todo">
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

3、使用 keep-alive 缓存组件，防止组件来回的创建和销毁这样浪费性能

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

4、拆分组件，增加代码的复用性，减少不必要的渲染

5、v-if 如果可以改写成 v-show 指令

6、key 最好保证唯一性，提高 DOM-diff 的复用性能

7、合理的使用路由懒加载，异步组件

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
})

8. 数据持久化，本地存储

加载优化

1. 第三方模块按需导入
2. 图片懒加载 vue-loayload

用户体验

1. 骨架屏
2. pwa 使用的 H5 的离线缓存

SEO优化

预渲染插件 prerender-spa-plugin
服务端渲染

打包优化

使用 cdn 加载第三方模块
多线程打包 happypack
splitChunks 抽离公共文件
sourceMap 生成源码映射
压缩和缓存