关于前端: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);

关于前端:vue-的组件懒加载

为什么须要懒加载

解决形式