Vue Lazy Component

🐌 Vue.js 2.x 组件级懒加载方案

English version documentation

特性

• 支持 组件可见或即将可见时懒加载
• 支持 组件延时加载
• 支持 加载真实组件前展示骨架组件，提高用户体验
• 支持 真实组件代码分包异步加载

安装 / Installation

npm install @xunlei/vue-lazy-component

在线demo / Online demo

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

使用

1. 注册组件

方式1 利用插件方式全局注册

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

Vue.use(VueLazyComponent)

方式2 局部注册

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

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

方式3 独立版本引入，自动全局注册

前提是 vue 也是独立版本通过script标签引入

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

2. 模版语法

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

Props

Events

注意 / Notes

1. 该项目依赖 IntersectionObserver API，如需在较低版本浏览器运行，需要引入 IntersectionObserver API polyfill

IntersectionObserver API polyfill

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

2. webpack 分包异步加载方式依赖 Scoped Component Slots, 需要 Vue 版本大于2.1.0

• https://cn.vuejs.org/v2/guide/components.html#作用域插槽

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

Roadmap

• [x] SSR 支持 @ v1.1.0

• [ ] UI单元测试 @ v1.2.0

• [ ] 减少性能开销 @ v1.3.0

License

MIT

Copyright (c) 2017 XunleiF2E