【前端性能优化】vue性能优化

1、template

1. v-show，v-if 用哪一个？第一个维度是权限问题，只要涉及到权限相关的展现无疑要用 v-if ，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show ，不频繁切换的使用 v-if ，这里要说的优化点在于减小页面中 dom 总数，我比较倾向于使用 v-if ，由于减小了 dom 数量，加快首屏渲染，至于性能方面我感受肉眼看不出来切换的渲染过程，也不会影响用户的体验。javascript

2. 不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)" ，这种表达式虽然说能够识别，可是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便咱们在多处判断相同的表达式，其余权限相同的元素再判断展现的时候调用同一个方法便可。css

3. 循环调用子组件时添加 key,key 能够惟一标识一个循环个体，可使用例如 item.id 做为 key，假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key="item" 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr ，而后 :key="index" 来确保 key 的惟一性。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。html

   2、style

  3.减小watch的数据。当组件某个数据变动后须要对应的state进行变动，就须要对另外的组件进行state进行变动。可使用watch监听相应的数据变动并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，因此减小watch的数据。其它不一样的组件的state双向绑定，能够采用事件中央总线或者vuex进行数据的变动操做。java

4、组件优化

在项目开发过程之中，若是把全部的组件的布局写在一个组件中，当数据变动时，因为组件代码比较庞大，vue 的数据驱动视图更新会比较慢，形成渲染过慢，也会形成比较差的体验效果。因此要把组件细分，好比一个组件，能够把整个组件细分红轮播组件、列表组件、分页组件等。
webpack

5、组件的异步加载（按需加载组件）

在平时的demo中，可能不会碰见这个需求。当页面不少，组件不少的时候，SPA页面在首次加载的时候，就会变的很慢。这是由于vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就须要对页面进行优化，就须要异步组件了。
ios

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}
{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}
复制代码

6、打包优化

解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。web

例如：vue-router

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>复制代码

在 webpack 里有个 externals，能够忽略不须要打包的库
vuex

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}复制代码