vue 的组件懒加载

为什么需要懒加载

vue的单页面应用访问速度通常状况下已经很快了，不过对于比较复杂的页面首次打开的时候会很慢，慢的缘由呢主要涉及以下两个方面：一、dom元素较多，首次打开时须要进行太多的渲染和判断，而这些渲染和判断大多数每每都不是首次打开页面时须要消耗的。二、多数首次不显示的的dom元素，或者子组件加载时会调用ajax请求加载数据，这时候首次加载的请求可能有5个、10个甚至更多，这时候并发请求就会带来竞争，首次加载现实的可能只须要1-2个请求，时间花费30ms便可，可是一旦5-10个请求并发，这时候的体验效果是很是差的。

解决方式

一、v-if众所周知，v-if的指令在条件为false时是不渲染页面的，所以这个方法确实可用，但是如果说项目复杂，组件太多，去每一个写v-if，多少有些麻烦。二、子组件能够经过插槽对父组件引用子组件包裹的内容进行分发。首先写一个PlLazy.vue组件

<template>
  <span>
    <slot v-if="initSuccess"></slot>
  </span>
</template>

<script>
  export default {
    name: "pl-lazy",
    props: {
      time: {
        //这个地方也许需要定义time的类型  data
        required: false,
        default: 0
      }
    },
    data() {
      return {
        initSuccess: false
      }
    },
    created() {
      this.initSlot();
    },

    methods: {
      initSlot() {
        let vm = this;
        setTimeout(function () {
          vm.initSuccess = true;
        }, (Number(vm.time || 0)));
      }
    }
  }
</script>

<style scoped>

</style>

子组件包含参数time，做为可设置的延迟加载时间，默认为0ms，非必填接下来是一、父组件调用

import PlLazy from "./plLazy";

export default {
  components: {
    PlLazy
  }, 
  name: "test-lazy"
}

二、在须要延迟加载的组件上方嵌套<pl-lazy></pl-lazy>组件便可:

<pl-lazy time="200">
这里放的是延迟加载的组件/dom内容
</pl-lazy>

若是使用的地方比较多的话，那么每一个页面都这样引入有点繁琐了，我们须要公共引入组件，要达到这个效果只须要在main.js中引入组件便可:

// 注册全局组件
import plLazy from "./components/common/components/plLazy";
Vue.component('pl-lazy', plLazy);