@xunlei/vue-lazy-component NPM

Vue Lazy Component

🐌 Vue.js 2.x component level lazy loading component

Features

Support load component when componet visible or will soon be visible
Support load compoent for time delay
Support load skeleton component before real component load to improve the user experience
Support code split to load components asynchronously

Installation

npm install @xunlei/vue-lazy-component

Online demo

https://xunleif2e.github.io/vue-lazy-component/demo/dist/index.html

Usage

Registration

Use plugin to register a global component

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

Vue.use(VueLazyComponent)

Local Registration

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

export default {
  // ...
  components: {
    'vue-lazy-component': VueLazyComponent
  }
}

Direct `<script>` Include

The premise is that Vue is also use direct <script> include.

<script src="https://unpkg.com/@xunlei/vue-lazy-component@1.0.7/dist/vue-lazy-component.js"></script>

Template syntax

 <vue-lazy-component
  @init="init"
  @beforeInit="beforeInit"
 >
  <!-- real component-->
  <st-series-sohu/>
  <!-- skeleton component -->
  <st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

Props

Parameter	Description	Type	Optional	Default value
viewport	Viewport where componet is in. Default is the window viewport.	HTMLElement	true	`null` means window viewport
direction	Direction of the viewport scolls. `vertical` or `horizontal`	String	true	`vertical`
threshold	Threshold of preload, in css synax.	String	true	`0px`
tagName	Tag name of the wrapper element.	String	true	`div`
timeout	Delay time. If set this, whether visible or not, automatically load after the specified time	Number	true	-

Events

Event Name	Description	Args
before-init	Component visible or delayed cut-off caused to begin loading the real component.	-
init	Start to load real componet	-
before-enter	Real component begin enter	el
before-leave	Skeleton component begin leave	el
after-leave	Skeleton component leaved	el
after-enter	Real component entered	el
after-init	Initialization is complete	-

Notes

The project relies on IntersectionObserver API. To run in an earlier version of the browser, you need to include IntersectionObserver API polyfill

IntersectionObserver API polyfill

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

Using Scoped Component Slots require Vue 2.1.0+

https://vuejs.org/v2/guide/components.html#Scoped-Slots

Development Setup

# install deps
npm install

# serve demo at localhost:8080
npm run dev

# build library and demo
npm run build

# build library
npm run build:library

# build demo
npm run build:demo

# commit use commitizen
npm run commit

# pre publish
npm run prepublish

# generate changelog
npm run changelog