vue优化方案

vue优化方案:
gzip压缩
computed
data
parent-son component
keep-alive
vshow
lazy loading requestAnimationFrame
cdn 第三方插件缓存
webpack压缩
computed
lcd pk vc wc

0.data优化
不用修改的对象的freeze,
不需要响应的数据放在data外面，缺点是切换页面时该数据不销毁

判断是否冻结:Object.isFrozen(obj)

data() {
    return {
      freezeObject: Object.freeze({
        name: '小红'
      })
    }
  }

或者放在外面
1、函数形组件（functional),没有生命周期.

<template functional>
	{{data}}
<template>
<script>
export default {
	props: {
		data: ''
	}
}
</script>

Vue.component('my-component', {
  // 声明为函数式组件
  functional: true, 
  // Props 是可选的
  props: {
    // ...
  }, render: function (createElement, context) {
    // ...
  }
})

2、子组件拆分（修改后减少dom后渲染）
3、用keep-alive（缓存页面）
4、computed
5、用v-show，不用v-if（v-if操作dom结构，性能低）,v-if加key值
6、用mixins（mixins引入的js后执行，延迟装载Defer）
7、time slicing 分批处理（用requestAnimationFrame定时器，分批次执行list,防止一次性执行list太大阻塞页面渲染）
8、非响应式模式（不要直接对data进行操作，减少vue框架对data的监视和观察）

vue-router 和 vuex 优化
9、懒加载, 仅渲染可视化部分（如list有100条数据，用户只看得到20条，所以先只渲染20条数据）

const Foo = r => require.ensure([], () => r(require(‘./Foo.vue’)), ‘group-foo’)

10.vuex数据可以缓存到localStorage里面

打包优化
11.有些公用的可以cdn
解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。