Vue项目优化（代码优化）

一、代码优化

1、使用keep-aliive包裹动态组件

• 在动态组件中的应用：

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <component :is="currentComponent"></component>
</keep-alive>

• 在vue-router中的应用：

<keep-alive :include="whiteList" :exclude="blackList">
   <router-view></router-view>
</keep-alive>

include定义白名单，keep-alive会缓存命中的组件；exclude定义黑名单，命中的组件不会被缓存。
很多时候也可以结合meta使用，例如：

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->

2、使用路由懒加载
Vue是单页面应用，会有很多的路由引入，这样使用webpack打包后的文件很大，当进入首页时，加载的资源过多，就会出现白屏的现象，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候再加载组件，这样会更高效。这样首屏加载速度提高，但其他页面的速度就会慢下来。
路由懒加载：

export default new Router({
  mode: 'history',
  routes: [
			{
		     path: '/',
		     component: ()=>import('@/components/DefaultIndex') }
		     ]
		     })

3、图片懒加载
对于图片过多的页面，为了提高页面加载速度，我们可以将页面上未出现在可视区域的图片先不做加载，等图片滚动到屏幕可视区时再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

npm引入：npm i vue-lazyload -S
CDN引入：[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)

插件的使用：
main.js:

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

4、使用节流防抖函数(性能优化)
那么在 vue 中的使用：
在公共方法中（如 untils.js 中），加入函数防抖和节流方法

// 防抖
export function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 节流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

在需要使用的组件引用

import { _debounce } from "@/utils/public";

在 methods 中使用

  methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

5、 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
6、 v-if 和 v-show 区分使用场景
7、computed 和 watch 区分使用场景
8、长列表性能优化
Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

9、事件的销毁
Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如

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

10、第三方插件的按需引入
我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例
（1）首先，安装 babel-plugin-component ：

	 npm install babel-plugin-component -D
``
（2）然后，将 .babelrc 修改为：
```js
 {
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
     ]
   ]
 }

（3）在 main.js 中引入部分组件：

 import Vue from 'vue';
 import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)