Vue 代码优化

• 给v-for循环项加上key提高diff计算速度

  • 为什么加key会提高diff计算速度

    经过旧头新头、旧尾新尾、旧头新尾、旧尾新头四次交叉比对后，都没有匹配到值得比对的节点，这时如果新节点有key的话。可以通过map直接获得值得对比的旧节点的下标，如果没有key的话，就要通过循环旧节点数组用sameVnode方法判断新节点和该旧节点是否值得比较，值得就返回该旧节点的下标。显然通过map比通过循环数组的计算速度来的快。

  • 什么是diff计算

    对于渲染watcher触发时会执行vm._update(vm._render(), hydrating)，在vm._undata方法中会调用vm.patch，而vm.patch指向patch方法，diff计算是指在调用patch方法开始，用sameVnode方法判断节点是否值得比较，若不值得直接新节点替换旧节点后结束。值得对比进入patchVnode方法，分别处理一下几种情况，若新旧节点都有文本节点，新节点下的文本节点直接替换旧节点下的文本节点，如果新节点有子节点，旧节点没有子节点，那么直接把新节点查到旧节点的父级中，如果新节点没有子节点，旧节点有子节点，那么旧节点的父级下的子节点都删了。如果新旧节点都有子节点，进入updateChildren方法，通过旧头新头、旧尾新尾、旧头新尾、旧尾新头四次交叉比对，如果值得对比再进入patchVnode方法，如果都不值得对比，有key用map获得值得对比的旧节点，没有key通过循环旧节点获得值得对比的旧节点。当新节点都对比完，旧节点还没对比完，将还没对比完的旧节点删掉。当旧节点都对比完，新节点还没对比完，将新节点添加到最后一个对比过的新节点后面，完成diff计算。

• 提前处理好数据解决v-if和v-for必须同级的问题

因为当Vue处理指令时，v-for比v-if具有更高的优先级，意味着v-if 将分别重复运行于每个v-for循环中。
可以在computed中提前把要v-for的数据中v-if的数据项给过滤处理了。

<template>
  <div>
    <div v-for="item in userList" :key="item.id" v-if="item.age > 18">
      {{ item.name }}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        userList: [
          {
            id: 1,
            name: 'test-1',
            age: 20
          },
          {
            id: 2,
            name: 'test-2',
            age: 17
          }
        ]
      }
    }
  }
</script>

修改为

<template>
  <div>
    <div v-for="item in userComputedList" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    components: {
      userComputedList: () => {
        return this.userList.filter(function (item) {
          return item.age > 18
        })
      }
    },
    data() {
      return {
        userList: [
          {
            id: 1,
            name: 'test-1',
            age: 20
          },
          {
            id: 2,
            name: 'test-2',
            age: 17
          }
        ]
      }
    }
  }
</script>

• 开启optimization.minimize来压缩js代码

  optimization.minimize选项有两个值true和false，为true开启压缩js代码，为false关闭压缩js代码。
  在生产环境中默认为true，在开发环境中默认为false。
  如果你在开发环境不需要用debug调试代码，可以也设置为true来压缩js代码，提高页面加载速度。
  在vue.config.js中这么配置

  module.exports = {
    configureWebpack: config => {
      return {
        optimization:{
          minimize: true
        }
      }
    }
  }
  

• 在Nginx上开启gzip压缩
  • <font color=#FF7F50 size=3 face="黑体">gzip</font>：on | off ，默认为off，on为开启gzip，off为关闭gzip。
  • <font color=#FF7F50 size=3 face="黑体">gzip_min_length</font>：number，压缩起点，文件大于多少才进行压缩，单位默认为字节，也可用k表示千字节。
  • <font color=#FF7F50 size=3 face="黑体">gzip_comp_level</font>：压缩级别，1-9，数字越大，压缩后的大小越小，也越占用CPU，花费时间越长。
  • <font color=#FF7F50 size=3 face="黑体">gzip_types</font>：需要进行压缩的文件类型。类型去Response headers中看Content-Type属性。
  • <font color=#FF7F50 size=3 face="黑体">gzip_buffers</font>：number size，设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。 例如 4 4k代表以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。如原始数据大小为17K，则申请 （17/4）*4 = 17k内存。
  • <font color=#FF7F50 size=3 face="黑体">gzip_http_version</font>：设置gzip压缩针对的HTTP协议版本以上。
  • <font color=#FF7F50 size=3 face="黑体">gzip_vary</font>：on | off，是否在http header中添加Vary:Accept-Encoding，on表示添加。Vary:Accept-Encoding告诉代理服务器缓存两种版本的资源：压缩和非压缩，避免一个浏览器不支持压缩资源，而先请求了服务器，服务器缓存了非压缩的资源，然后一个浏览器支持压缩资源，再去请求了服务器，结果得到非压缩资源，但是又去解压它，结果会出错。所以建议设置为on。

http {
  gzip              on;
  gzip_min_length   1k;
  gzip_comp_level   5;
  gzip_types        application/javascript image/png image/gif image/jpeg text/css text/plain;
  gzip_buffers      4 4k;
  gzip_http_version 1.1;
  gzip_vary         on;
}