🐌 Vue.js 2.x 组件级懒加载方案
- 支持 组件可见或即将可见时懒加载
- 支持 组件延时加载
- 支持 加载真实组件前展示骨架组件，提高用户体验
- 支持 真实组件代码分包异步加载
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标签引入
<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>| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| viewport | 组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器 | HTMLElement | true | null，代表视窗 |
| direction | 视口的滚动方向, vertical代表垂直方向，horizontal代表水平方向 |
String | true | vertical |
| threshold | 预加载阈值, css单位 | String | true | 0px |
| tagName | 包裹组件的外层容器的标签名 | String | true | div |
| timeout | 等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载 | Number | true | - |
| 事件名 | 说明 | 事件参数 |
|---|---|---|
| before-init | 模块可见或延时截止导致准备开始加载懒加载模块 | - |
| init | 开始加载懒加载模块，此时骨架组件开始消失 | - |
| before-enter | 懒加载模块开始进入 | el |
| before-leave | 骨架组件开始离开 | el |
| after-leave | 骨架组件已经离开 | el |
| after-enter | 懒加载模快已经进入 | el |
| after-init | 初始化完成 | - |
- 该项目依赖 IntersectionObserver API，如需在较低版本浏览器运行，需要引入 IntersectionObserver API polyfill
https://github.com/w3c/IntersectionObserver/tree/master/polyfill
- webpack 分包异步加载方式依赖
Scoped Component Slots, 需要 Vue 版本大于2.1.0
# 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
Copyright (c) 2017 XunleiF2E