vue性能优化

前言：在公司中一般都是使用vue脚手架开发，因此在webpack层面上的性能优化，例如图片压缩，gzip压缩的啥的基本上不用我们去考虑（文章说的不对请评论指正，本人也在学习中）
疑问：对于一个菜鸟来讲少些了一行代码实现了相同的效果算不算性能优化？哈哈哈

性能优化：当你使用npm run build 或者 使用vue ui 可视化界面进行打包时，你可以看到你的一些文件的大小，当你的文件过大时，你就应该考虑到如何将该文件变小了，当通过一系列的操作发现，打包后文件比之前变小了，那么恭喜你99%的可能性你性能优化成功了。

在这里推荐一个插件，使用 npm run build后你可以很清楚的看到你的每个文件的大小

//安装
npm install webpack-bundle-analyzer --save-dev
// vue.config.js文件配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
  },
};
//使用
npm run build/npm run build --report

使用css预处理器scss

安装：npm install sass-loader node-sass --save-dev（还没写完啦）

v-for循环中的key

为什么会性能优化我就不惜讲了哈，虽然我大致知道一点但我讲不明白。当然有大佬可以在评论区讨论一下吗，不介意的话

// 我看别人的代码key的值直接使用index但我总觉得这样不行，我感觉还是使用item中的一个唯一属性值的属性最好
// 例如:key="item.id"
<div v-for="(item,index) in list" :key="index">
	{{item}}
</div>

v-if和v-show

这我就不见了

代码模块化

在多个组件中如果你发现有很多代码相同的话，那么你可以使用mixin(混入)

mixin(混入)是一种分发vue组件中可复用功能非常灵活的方式。混入的对象可以包含任何组件对象。当组件使用混入对象时，所有混入对象的选项将被混入该组件的对象

//mixin.js文件
//定义一个混入对象
import { mapActions, mapGetters, mapMutations } from 'vuex'
export const mymixin = {
  computed:{
    ...mapGetters([
      'playList'
    ])
  },
  mounted(){
    this.handlePlaylist(this.playList)
  },
  activated(){
    this.handlePlaylist(this.playList)
  },
  watch:{
    playList(newVal){
      this.handlePlaylist(newVal)
    }
  },
  methods:{
    handlePlaylist(){
      throw new Error('component must implement handlePlaylist method');
    }
  }
	...
}

// 组件中使用mixin
<script>
  import { scroll } from "mixin文件路径"
  export default {
    mixins:[scroll]
  }
</script>

对于一些通用的方法的法我们可以对它进行封装，在进行全局引用，例如时间格式化

/**
 * 将Date类型转换成指定格式的字符串
 * @param {*} fmt 时间格式：yyyy-MM-dd hh:mm:ss, yyyy-MM-dd等等都支持
 * @returns 
 */
Date.prototype.formatDate=function(fmt) {         
    var o = {         
    "M+" : this.getMonth()+1, //月份         
    "d+" : this.getDate(), //日         
    "h+" : this.getHours(), //小时         
    "H+" : this.getHours(), //小时         
    "m+" : this.getMinutes(), //分         
    "s+" : this.getSeconds(), //秒         
    "q+" : Math.floor((this.getMonth()+3)/3), //季度         
    "S" : this.getMilliseconds() //毫秒         
    };         
    var week = {         
    "0" : "/u65e5",         
    "1" : "/u4e00",         
    "2" : "/u4e8c",         
    "3" : "/u4e09",         
    "4" : "/u56db",         
    "5" : "/u4e94",         
    "6" : "/u516d"        
    };         
    if(/(y+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));         
    }         
    if(/(E+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);         
    }         
    for(var k in o){         
        if(new RegExp("("+ k +")").test(fmt)){         
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         
        }         
    }         
    return fmt;         
}

main.js文件引入

import '文件路径'

组件中使用

let date = new Date()
date.formatDate('yyyy-MM-dd hh:mm:ss')

路由的懒加载

//普通的使用方法
//使用这种方法导入路由的化，最终打包项目的时候所有的路由组件都会打包到同一个文件当中，当组件过多时，js文件会变得很大，当我们一运行项目时，所有的组件都会被加载，有可能导致加载时间过长，出现短暂的空白的情况
import Home from '路径'
//路由的懒加载
//使用路由懒加载的化最终会被打包到不同的js文件夹中，做到按需加载
const Home = () => import('路径')

组件的懒加载

//肯定没多少人使用过吧，哈哈哈
// 使用方法跟路由的懒加载一样
const Home = () => import (''路径)
//一般情况下是不适用组件的懒加载的，除非组件太过庞大,如果每一个小小的组件都使用懒加载的话最终会生成很多小的js文件，反而会因为网络请求的原因，拖慢加载速度

使用keep-alive

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，避免被重新渲染。但并不是所有的组件都是要保留状态的，我们可以通过属性进行控制，需要用到组件中的name属性（name属性值是唯一的）

//name属性值为Home的组件会被缓存
<keep-alive inclued="Home">
  <router-view></router-view>
</keep-alive>
//除name属性值为Home的组件会被缓存
<keep-alive exclued="Home">
  <router-view></router-view>
</keep-alive>

为什么说使用keep-alive可以提高性能优化，那么我们就来了解一下生命周期

1. created：创建好组件后进行回调
2. mounted：当template标签挂载到dom上进行回调
3. updated：当页面进行刷新后进行回调
4. destroyed：当组件被销毁后进行回调

因此路由之间的来回切换就是组件不断创建与销毁的过程，那么就意味着浏览器会频繁的往后端去发送http请求，这样当然会影响到性能。

使用了keep-alive的话那么一定会使用到下面这两个函数(与created同一级)

export default {
  name: 'lcm',
  //当组件处于活跃状态的时候调用
  activated(){
  }
  //当组件处于不活跃状态的时候调用
  deactivated(){
  }
};

使用cdn

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.js文件中，导致该文件过大。我们可以通过exters排除这些包，让他们不打包到chunk-vendors.js文件中，而这些排除的包我们可以在public/index.html文件中使用cdn引入这些资源

//在vue.config.js文件中进行配置让第三方包不会被打包到js/chunk-vendors.js文件中
module.exports = {
    configureWebpack:{
        externals:{
            'element-ui':'Element-ui'
        }
    }
}

public/index.html文件中使用cdn引入这些资源

使用cdn的方式引入指定的第三方包百度即可

注意：这里需要注意的一点是，依赖库使用 cdn 文件来加载话，网络请求的速度与 cdn 的速度有关，如果不放心别人的 cdn ，将上述的 cdn 文件内容下载到本地放在指定目录下当做静态文件即可。

同时建议使用 CDN 引入依赖的用户在链接地址上锁定版本，以免将来升级时受到非兼容性更新的影响。

//以引入element-ui为例
//引入最新版本
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
//引入指定版本
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.11.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>

按需引入

以element ui 为例

main.js文件
//完整引入
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
//按需引入
//安装插件(element ui需要安装插件)
npm install babel-plugin-component -D
//
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.use(Button)
Vue.use(Select)
new Vue({
  el: '#app',
  render: h => h(App)
});