vue项目优化

一、使用keep-alive缓存不活动组件

         keep-alive是一个抽象组件：使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而            不是销毁它们。 有两个参数 include包裹的组件不会被缓存 ，exclude包裹的组件会缓存

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

二. 使用路由懒加载：

也叫延迟加载， 使用懒加载的原因： vue 是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，会出现白屏的，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验

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

三、 图片懒加载

    对于图片过多的页面，为了加速页面加载速度，对未出现的可视区域内的图片先不做加载

          等到滚动到可视区域后再去加载，提高性能，，也提高了用户体验。

      1.下载 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)

     2.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
  }
})

       3.使用

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

四、 使用节流防抖函数(性能优化)

函数防抖(debounce)

在事件被触发n秒后再执行回