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

1、template

语义化标签，避免乱嵌套，合理命名属性等等标准推荐的东西就不谈了。

模板部分帮助咱们展现结构化数据，vue 经过数据驱动视图，主要注意一下几点

1. v-show，v-if 用哪一个？在我来看要分两个维度去思考问题，第一个维度是权限问题，只要涉及到权限相关的展现无疑要用 v-if ，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show ，不频繁切换的使用 v-if ，这里要说的优化点在于减小页面中 dom 总数，我比较倾向于使用 v-if ，由于减小了 dom 数量，加快首屏渲染，至于性能方面我感受肉眼看不出来切换的渲染过程，也不会影响用户的体验。
2. 不要在模板里面写过多的表达式与判断 v-if="isShow && isAdmin && (a || b)" ，这种表达式虽然说能够识别，可是不是长久之计，当看着不舒服时，适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便咱们在多处判断相同的表达式，其余权限相同的元素再判断展现的时候调用同一个方法便可。

3. 循环调用子组件时添加 key。

4. • key 能够惟一标识一个循环个体，可使用例如 item.id 做为 key，假如数组数据是这样的 ['a' , 'b', 'c', 'a'],使用 :key="item" 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr ，而后 :key="index" 来确保 key 的惟一性。

• 在列表数据进行遍历渲染时，给每一项item设置惟一key值，会方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。

2、style

1. 将样式文件放在 vue 文件内仍是外？讨论起来没有意义，重点是按模块划分，个人习惯是放在 vue 文件内部，方便写代码是在同一个文件里跳转上下对照，不管内外建议加上 <style scoped> 将样式文件锁住，目的很简单，再好用的标准也避免不了多人开发的麻烦，约定命名规则也可能会冲突，锁定区域后尽可能采用简短的命名规则，不须要 .header-title__text 之类的 class，直接 .title 搞定。
2. 为了和上一条做区分，说下全局的样式文件，全局的样式文件，尽可能抽象化，既然不在每个组件里重复写，就尽可能通用，这部分抽象作的越好说明你的样式文件体积越小，复用率越高。建议将复写组件库如 Element 样式的代码也放到全局中去。
3. 不使用 float 布局，以前看到不少人封装了 .fl -- float: left 到全局文件里去，而后又要 .clear，如今的浏览器还不至于弱到非要用 float 去兼容，彻底能够 flex，grid 兼容性通常，功能其实 flex 布局均可以实现，float 会带来布局上的麻烦，用过的都知道。
4. 至于其余通用的规范这里不赘述。

3、script

这部分也是最难优化的点，说下我的意见吧。

1. 多人开发时尽可能保持每一个组件 export default {} 内的方法顺序一致，方便查找对应的方法。我的习惯 data、props、钩子、watch、computed、components。
2. data 里要说的就是初始化数据的结构尽可能详细，命名清晰，简单易懂，避免无用的变量，isEditing 实际能够表明两个状态，true 或 false，不要再去定义 notEditing 来控制展现，彻底能够在模板里 {{ isEditing ? 编辑中 : 保存 }}
3. props 父子组件传值时尽可能 :width="" :heigth="" 不要 :option={} ，细化的好处是只传须要修改的参数，在子组件 props 里加数据类型，是否必传，以及默认值，便于排查错误，让传值更严谨。
4. 钩子理解好生命周期的含义就好，什么时间应该请求，什么时间注销方法，哪些方法须要注销。简单易懂，官网都有写。
5. methods 中每个方法必定要简单，只作一件事，尽可能封装可复用的简短的方法，参数不易过多。若是十分依赖 lodash 开发，method 看着会简洁许多，代价就是总体的 bundle 体积会大，假如项目仅仅用到小部分方法能够局部引入 loadsh，不想用 lodash 的话能够本身封装一个 util.js 文件
6. watch 和 computed 用哪一个的问题看官网的例子，计算属性主要是作一层 filter 转换，切忌加一些调用方法进去，watch 的做用就是监听数据变化去改变数据或触发事件如 this.$store.dispatch('update', { ... })
7. 减小watch的数据。当组件某个数据变动后须要对应的state进行变动，就须要对另外的组件进行state进行变动。可使用watch监听相应的数据变动并绑定事件。当watch的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，因此减小watch的数据。其它不一样的组件的state双向绑定，能够采用事件中央总线或者vuex进行数据的变动操做。

​

4、组件优化

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

组件细化是有必要的，那组件细化到什么程度算是合理，还要因项目大小而异，小型项目能够简单几个组件搞定，甚至不用 vuex，axios 等等，若是规模较大就要细分组件，越细越好，包括布局的封装，按钮，表单，提示框，轮播等，推荐看下 Element 组件库的代码，没时间写这么详细能够直接用 Element 库，分几点进行优化：

1. 组件有明确含义，只处理相似的业务。复用性越高越好，配置性越强越好。
2. 本身封装组件仍是遵循配置 props 细化的规则。
3. 组件分类，我习惯性的按照三类划分，page、page-item 和 layout，page 是路由控制的部分，page-item 属于 page 里各个布局块如 banner、side 等等，layout 里放置多个页面至少出现两次的组件，如 icon, scrollTop 等

​

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

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

在路由index.js里（路径： src/router/index.js ），经过require方式或者import()方式动态加载组件。像下面这样：

{
    path: '/home',
    name: 'home',
    component:require('@views/home').default
}

或者

{
    path: '/home',
    name: 'home',
    component:() => import('@views/home')
}

6、vue-router 和 vuex 优化

vue-router 除了切换路由，用的最多的是处理权限的逻辑，关于权限的控制这里不赘述，相关 demo 和文章有许多，那么说到优化，值得一提的就是 组件懒加载

中文官网连接如上，例子以下

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

这段代码将 Foo, Bar, Baz 三个组件打包进了名为 group-foo 的 chunk 文件，固然啦是 js 文件

其他部分正常写就能够，在网站加载时会自动解析须要加载哪一个 chunk，虽然分别打包的整体积会变大，可是单看请求首屏速度的话，快了好多。
​
vuex 面临的问题和解决方案有几点

1. 当网站足够大时，一个状态树下，根的部分字段繁多，解决这个问题就要模块化 vuex，官网提供了模块化方案，容许咱们在初始化 vuex 的时候配置 modules。每个 module 里面又分别包含 state 、action 等，看似是多个状态树，其实仍是基于 rootState 的子树。细分后整个 state 结构就清晰了，管理起来也方便许多。
2. 因为 vuex 的灵活性，带来了编码不统一的状况，完整的闭环是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed，实际上中间的环节有的能够省略，由于 API 文档提供了如下几个方法 mapState、mapGetters、mapActions、mapMutations，而后在组件里能够直接调取任何一步，仍是项目小想怎么调用均可以，项目大的时候，就要考虑 vuex 使用的统一性，个人建议是不论多简单的流程都跑完整个闭环，造成代码的统一，方便后期管理，在个人组件里只容许出现 dispatch 和 mapGetters，其他的流程都在名为 store 的 vuex 文件夹里进行。

3. 基于上面一条，说下每一个过程里面要作什么，先后端数据必定会有不一致的地方，或是数据结构，或是字段命名，那么究竟应该在哪一步处理数据转换的逻辑呢？有人会说其实哪一步均可以实现，其实否则，个人建议以下

   • 在发 dispatch 以前就处理好组件内须要传的参数的数据结构和字段名
   • 到了 action 容许咱们作的事情不少，由于这部支持异步，支持 state, rootState, commit, dispatch, getters，因而可知责任重大，首先若是后端须要部分其余 module 里面的数据，要经过 rootState 取值再整合到原有数据上，下一步发出请求,建议（async await + axios），拿到数据后进行筛选转换，再发送 commit 到 mutation
   • 这一步是将转换后的数据更新到 state 里，可能会有数据分发的过程（传进一个 object 改变多个 state 中 key 的 value），能够转换数据结构，可是尽可能不作字段转换，在上一步作
   • 此时的 store 已经更新，使用 getter 方法来取值，token: state => state.token，单单的取值，尽可能不要作数据转换，须要转换的点在于多个地方用相同的字段，可是结构不一样的状况（不多出现）。
   • 在组件里用 mapGetters 拿到对应的 getter 值。

​

7、打包优化

上面说了代码方面的规范和优化，下面说下重点的打包优化，前段时间打包的 vender bundle 足足 1.4M，app bundle 也有 270K，app bundle 能够经过组件懒加载解决，vender 包该怎么解决？

有人会质疑是否是没压缩或依赖包没去重，其实都作了就是看到的 1.4M。

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

例如：

<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，能够忽略不须要打包的库

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}

此时的 vender 包会很是小，若是不够小还能够拆分其余的库，此时增长了请求的数量，可是远比加载一个 1.4M 的 bundle 快的多。