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 (c) 2017 XunleiF2E