xunleif2e / vue-lazy-component

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

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

参数	说明	类型	可选值	默认值
viewport	组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器	HTMLElement	true	null，代表视窗
direction	视口的滚动方向, vertical代表垂直方向，horizontal代表水平方向	String	true	vertical
threshold	预加载阈值, css单位	String	true	0px
tagName	包裹组件的外层容器的标签名	String	true	div
timeout	等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载	Number	true	-

Events

事件名	说明	事件参数
before-init	模块可见或延时截止导致准备开始加载懒加载模块	-
init	开始加载懒加载模块，此时骨架组件开始消失	-
before-enter	懒加载模块开始进入	el
before-leave	骨架组件开始离开	el
after-leave	骨架组件已经离开	el
after-enter	懒加载模快已经进入	el
after-init	初始化完成	-

注意 / 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

• SSR 支持 @ v1.1.0

• UI单元测试 @ v1.2.0

• 减少性能开销 @ v1.3.0

License

MIT

Copyright (c) 2017 XunleiF2E

vue-lazy-component's Issues

请问，如何支出IE（Edge）呢？

已经在项目中引入了babel-polyfill, 但是不起作用。
请问是我引入错误导致的吗？

连不上服务器

D:\worspace\ilab_app>npm install @xunlei/vue-lazy-component --save-dev
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR! network request to http://registry.npm.taobao.org/@xunlei%2fvue-lazy-component failed, reason: connect ETIMEDOUT 124.200.113.114:80
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

请问，如果内容高度不知道的情况下，有大有小，会出现数据重叠的情况

移动端，渲染列表的时候，内容文字很多，会出现数据的重叠，请问有没有好的解决方法，谢谢。

Compatible with a Safari 11.0.2 (13604.4.7.1.3)

苹果电脑Safari浏览器不能使用

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

官方案例报错
浏览器版本 12.0 (14606.1.36.1.9)

在nuxt.js里使用timeout选项的时候，进行编译时，Windows对象不存在问题

懒加载组件没有效果，因为我的组件js是可见时再去下载的，js还没下载完成，骨架屏就消失了

大佬，这个如何兼容ie，ie报错了。

Have you considered compatibility with the Vue3 version

Have you considered compatibility with the Vue3 version

IOS无法加载

vue-cli 无法加载

你这个骨架屏是自动生成的吗，我怎么看demo每个页面的骨架屏都要自己写

写的还挺专业啊.

npm install 失败，出现文件不存在的错误

npm 版本是 5.8.0
运行 npm install @xunlei/vue-lazy-component 出现如下错误：

npm ERR! path <Root>/node_modules/npm/node_modules/cacache/node_modules/mississippi/node_modules/stream-each/node_modules/stream-shift/package.json.1738479864
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '<Root>/node_modules/npm/node_modules/cacache/node_modules/mississippi/node_modules/stream-each/node_modules/stream-shift/package.json.1738479864'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2018-05-10T03_57_24_106Z-debug.log

有没有可以主动触发组件开始加载的方法？

如题，就是比如我进入一个页面，但是我还未滚到，我点击某个地方，想懒加载组件开始加载，我可以怎么办？

Vue 2.5.16 运行出错

[Vue warn]: Error in mounted hook: "TypeError: window.IntersectionObserver is not a constructor"

found in

---> at /Users/benzhao/Sites/@xunlei/vue-lazy-component/src/VueLazyComponent.vue
at resources/assets/app/js/containers/IndexContainer.vue
at resources/assets/app/js/pages/App.vue

iphone6 图片无法加载

配合i18n使用会有问题

如果项目使用 vue-i18n 当子组件外层包裹 vue-lazy-component 会导致 子组件 $i18n null $i18n无法映射到子组件中

ios端无法加载

mint-ui框架，ios端无法显示，android端正常

动态组件支持吗？

在具体项目中使用没有懒加载效果

<vue-lazy-component>
    <div class="module-title1">
           <div class="left-block">
                   热销新品
            </div>
      </div>
    <product-block></product-block>
    <div slot="skeleton">abcd</div>
</vue-lazy-component>

基本代码如上方所示。运行后没有懒加载效果，都是直接加载出来了。另外有一个疑问，比如我上面的product-block是import进来的组件，那是不是需要去掉这个组件的import还有Components:{}里的定义呢？

不支持vue2.7 setup语法写的组件，组件没有setup初始化

库输出的入口文件dist/vue-lazy-component.js包含const关键字

不兼容安卓4.x ios8.x

关于异步组件的问题

1、如果组件比较长，头部漏出一点点，下面的大片内容开始加载，好像不太符合常规的懒加载
2、针对懒加载图片有一个建议是单独实现一个aimg组件，接受跟img一样的属性，但是会做懒加载，这样可以做到真正意义上的懒加载

组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器 ,这时候这个viewport属性值怎么填

TypeError: Failed to construct 'IntersectionObserver': member root is not of type Element.
试过很多值,都是报这个错误

华为P20微信小程序中内嵌h5，无法懒加载

华为P20微信小程序中内嵌h5，无法懒加载，但是在微信浏览器里是可以懒加载的

maxWaitingTime默认时间设置的太短了

maxWaitingTime默认时间设置为50太短了，生产环境很容易超时，重新发请求

loading属性能控制slot内容加载么

<div v-if="isInit" key="component">
      <slot :loading="loading"></slot>
  </div>

动态组件，这样写格式对吗？

    <VueLazyComponent
        @init="init"
        @beforeInit="beforeInit"
    >
      <div v-for="(i,index) in getNormalComponent" :key="index">
        <component :is="i"></component>
      </div>
    </VueLazyComponent>