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/[email protected]/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

1. 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

2. 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

License

MIT

Copyright © 2017 XunleiF2E