🐌 Vue.js 2.x 组件级懒加载方案 Vue.js 2.x component level lazy loading component

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

• 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

npm install @xunlei/vue-lazy-component

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

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

Vue.use(VueLazyComponent)

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

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

前提是 vue 也是独立版本通过script标签引入 / 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>

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

1. 该项目依赖 IntersectionObserver API，如需在较低版本浏览器运行，需要引入 polyfill / The project relies on IntersectionObserver API. To run in an earlier version of the browser, you need to include polyfill

https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill

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

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

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

# 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

• SSR 支持 @ v1.1.0

• UI单元测试 @ v1.2.0

• 减少性能开销 @ v1.3.0

MIT

Copyright (c) 2017 赵兵