关于vue项目的性能优化

   1. 合理使用v-if和v-show

         v-if是真正的条件渲染，他的渲染机制是，直到第一次满足条件才会被渲染，条件不满足后又进行销毁。

         v-show 则不管满不满足条件，都会被渲染，显示与否只是切换dom的display属性。

         所以，一般v-if用于切换频率较少的场景，而v-show则适用于切换频率较多的场景。

    2. computed和watch

         computed的属性是计算属性，它的值依赖于其他属性，只有它依赖的属性变化时，它才会变化，同时它具有缓存的特性。

         watch的作用类似于观察或者监听，当你watch的属性发生变化时，它会执行一些自定义方法，和computed不同的是，在watch里我们可以执行一些异步的方法以及设置一些中间的状态。

         所以，当我们只是依赖某数据进行一些简单的操作(计算)时，我们可以使用computed;当我们需要在数据变化时，进行一系列的操作(修改其他属性、添加中间状态、进行异步请求等)时，我们使用watch

     3. v-for必须添加唯一标识key,且不推荐和v-if一起联用

          v-for作用是循环渲染一个列表，我们需要为每一个item添加唯一标识key,因为vue中存在虚拟DOM,diff算法会优先比较带有key的元素，如果前后两个key相同的虚拟dom完全相同，则比较时会跳过这个，从而节约了性能。

          v-for不推荐和v-if一起使用，当两者一起使用时，每渲染一个item都需要进行一次v-if判断,这样增加了性能消耗。推荐的做法是将所需的数据进行computed处理。

     4.纯展示的数据推荐使用Object.freeze()方法来锁定，禁止对它进行数据劫持

           我们知道vue通过Object.defineProperty()方法来进行数据劫持，然而我们在某些场景中，某些数据只是纯粹的展示，数据不会有任何的变化，这时候我们可以使用Object.freeze()方法来禁止它修改，从而加快组件的渲染速度。

     5.组件destroy前要将非vue本身事件销毁

            vue组建销毁时，会自动销毁和它绑定的事件和指令等，但是一些非vue的事件(手动通过addEventListener添加的)不会被销毁，需要在组件销毁时将他清除。

created() {
  addEventListener('click', this.click)
},
beforeDestroy() {
  removeEventListener('click', this.click)
}

     6.路由懒加载

           vue是单页面应用，内部通过router来切换页面，router内部会导入很多组件，通过webpack打包后，容易增加包的体积，从而增加首次加载时的白屏时间。这时我们可以通过路由懒加载的方式将代码分成不同的代码块，当路由被访问时再加载对应的组件，从而加快首屏加载速度。但是这样的做法的缺点是减慢了其他页面的加载速度。

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

    7.服务器渲染SSR或预渲染

         ssr是指将传统需要在客户端渲染完成的页面，由服务器端处理成html页面(包含页面数据)直接返给客户端显示，这个过程就叫服务端渲染。

    服务端渲染的优势：

• 有利于SEO。ssr将渲染好的页面直接返给客户端，不需要经过ajax请求数据，而传统vue渲染页面数据是通过类似ajax请求来获取数据的。所以说ssr更有利于SEO。
• 更快的首屏加载速度。传统vue项目首屏会获取一个js文件，然后才开始渲染整个页面，这样就导致在这个请求过程中我们会看到有一段白屏时间。而使用ssr渲染则直接将渲染好的页面返回，不需要加载js文件。

    服务端渲染的略势：

• 更大的开发成本。ssr只支持beforeCreate和created两个钩子函数；且和一些外部库的兼容性比较低，需要对一些库进行特殊处理，且需要运行在server环境。
• 更大的服务器负载。因为需要运行在server环境，所以当有大流量访问时，会占有大量cpu，需要有相应的服务器支持。

    8.图片懒加载

        对于图片过多的页面，一次性加载所有图片往往需要较长的时间，这时候我们可以选择进行图片懒加载，等图片到达显示区域再加载。vue-lazyload可以实现这个功能

// npm install vue-lazyload --save-dev  安装依赖

import VueLazyload from 'vue-lazyload'

// 引用
Vue.use(VueLazyload)

// 使用v-lazy指令
<img v-lazy="/static/img/1.png">

    9.对大图片压缩处理

        vue项目中，对于一些小的图片(通过limit设置最大值)会被转换为base64显示，但是对于一些比较大的图片，加载时间可能会很长，这时候我们需要将这些图片压缩以提高它的加载速度，而 image-webpack-loader可以帮助我们压缩图片。

// npm install image-webpack-loader --save-dev

// 先执行压缩，再转换base64
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
    }
  ]
}

    10.提取公共代码

       在项目中， 我们经常遇到以下问题：

       在多个页面中使用相同的资源，我们每次访问时都需要重复加载这些资源，增加了用户的流量和服务器成本。同时每个页面都需要加载这些资源，使得网页加载速度变慢，影响用户体验。

       所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题 。Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin，我们在项目中 CommonsChunkPlugin 的配置如下：

// 所有在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    );
  }
}),
// 抽取出代码模块的映射关系
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

    11. 第三方插件的按需引入

       在我们的项目中，对于一些第三方的插件库往往只是使用一部分，这时候我们不必要引入全部，只需要把它们按需引入即可。

    element-ui的按需加载

    iview的按需加载

    ant vue按需加载

    12. 开启 gzip 压缩

         gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右。

    13. 使用cdn

     14.使用浏览器缓存