开发vue延迟加载组件

vue的单页面应用访问速度一般情况下已经很快了，不过对于比较复杂的页面首次打开的时候会很慢，慢的原因呢主要涉及如下两个方面：

1、dom元素较多，首次打开时需要进行太多的渲染和判断，而这些渲染和判断大多数往往都不是首次打开页面时需要消耗的。

2、多数首次不显示的的dom元素，或者子组件加载时会调用ajax请求加载数据，这时候首次加载的请求可能有5个、10个甚至更多，这时候并发请求就会带来竞争，首次加载现实的可能只需要1-2个请求，时间花费30ms即可，但是一旦5-10个请求并发，那么会导致整体请求时间要达到150ms以上，这时候的体验效果是非常差的。

基于以上两个原因呢，咱们需要引入延迟加载的机制，目前网上存在一些延迟加载的组件，但是功能和我们的需求会有些差别，不够灵活，所以最好的方式是自己封装组件，vue的api中已经写的很清楚了，基于以下两点，证明延迟加载的机制是可行的：

1、v-if默认为false情况下不会加载组件，只有变为true的情况下才会进行加载，而且我们的组件加载后不需要销毁（https://cn.vuejs.org/v2/guide/conditional.html#v-if）

2、子组件可以通过插槽对父组件引用子组件包裹的内容进行分发。（https://cn.vuejs.org/v2/guide/components.html）

由以上两点，我们开发了延迟加载组件（代码基于vue-cli的项目），子组件内容如下，命名pl-lazy:

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

<script>
  export default {
    name: "pl-lazy",
    props: {
      time: {
        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，非必填。

父组件调用：

1、在script中引入组件（如果开发工具使用的是idea的话，输入<pl-lazy会自动生成如下引用）：

import PlLazy from "./plLazy";

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

2、在需要延迟加载的组件上方嵌套<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);

到此，大功告成！