vue組件懶加載（Vue Lazy Component ）

1.介紹：是vue組件懶加載的預估插件組件。支持組件組件延時加載， 加載真實組件前展示骨架組件，提高用戶體驗，真實組件代碼分包異步加載

// 安裝 

npm install @xunlei/vue-lazy-component

// 使用方式一

// main.js文件中全局注冊使用

import VueLazyComponent from '@xunlei/vue-lazy-component'

Vue.use(VueLazyComponent)


// 使用方式二

// 在組件中實現局部注冊組件


import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'

export default {

  components: {
    'vue-lazy-component': VueLazyComponent
  }
}

2.在組件中使用懶加載組件

<!--

    需要懶加載的組件將其包裹在vue-lazy-component中

    slot值為 skeleton 指的是在懶加載過程中顯示的加載狀態組件
-->

<vue-lazy-component :timeout="5000" tagName="div">

      <child1 slot="skeleton" />

      <child2 />

      <child3 />

      <child4 />

      <child5 />

</vue-lazy-component>

3.參數以及事件的介紹

轉帖：https://www.cnblogs.com/zxuedong/p/12825841.html