[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9036":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},9036,"vue-lazy-component","xunleif2e\u002Fvue-lazy-component","xunleif2e","🐌 Vue.js 2.x 组件级懒加载方案-Vue.js 2.x component level lazy loading solution","",null,"Vue",1009,140,16,14,0,54.45,"MIT License",false,"master",true,[23,24,25,26],"component","lazyload","plugin","vue","2026-06-12 04:00:42","# Vue Lazy Component\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@xunlei\u002Fvue-lazy-component.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@xunlei\u002Fvue-lazy-component)\n[![Commitizen friendly](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcommitizen-friendly-brightgreen.svg)](http:\u002F\u002Fcommitizen.github.io\u002Fcz-cli\u002F)\n[![Git flow work flow](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fgit--flow-workflow-brightgreen.svg)](https:\u002F\u002Fgithub.com\u002Fnvie\u002Fgitflow\u002F)\n[![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fxunleif2e\u002Fvue-lazy-component.svg)](https:\u002F\u002Fgithub.com\u002Fxunleif2e\u002Fvue-lazy-component\u002Fstargazers)\n[![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fxunleif2e\u002Fvue-lazy-component.svg)](https:\u002F\u002Fgithub.com\u002Fxunleif2e\u002Fvue-lazy-component\u002Fissues)\n[![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fxunleif2e\u002Fvue-lazy-component.svg)](https:\u002F\u002Fgithub.com\u002Fxunleif2e\u002Fvue-lazy-component\u002Fnetwork)\n[![GitHub license](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg)](https:\u002F\u002Fraw.githubusercontent.com\u002Fxunleif2e\u002Fvue-lazy-component\u002Fmaster\u002FLICENSE)\n\n> 🐌 Vue.js 2.x 组件级懒加载方案\n\n## [English version documentation](README.en.md)\n\n\n## 特性\n\n- 支持 组件可见或即将可见时懒加载\n- 支持 组件延时加载\n- 支持 加载真实组件前展示骨架组件，提高用户体验\n- 支持 真实组件代码分包异步加载\n\n## 安装 \u002F Installation\n\n```\nnpm install @xunlei\u002Fvue-lazy-component\n```\n\n## 在线demo \u002F Online demo\n\nhttps:\u002F\u002Fxunleif2e.github.io\u002Fvue-lazy-component\u002Fdemo\u002Fdist\u002Findex.html\n\n## 使用\n\n### 1. 注册组件\n\n#### 方式1 利用插件方式全局注册\n\n```javascript\nimport VueLazyComponent from '@xunlei\u002Fvue-lazy-component'\nimport Vue from 'vue'\n\nVue.use(VueLazyComponent)\n```\n\n#### 方式2 局部注册\n\n```javascript\nimport { component as VueLazyComponent } from '@xunlei\u002Fvue-lazy-component'\n\nexport default {\n  \u002F\u002F ...\n  components: {\n    'vue-lazy-component': VueLazyComponent\n  }\n}\n```\n\n#### 方式3 独立版本引入，自动全局注册\n\n> 前提是 vue 也是独立版本通过script标签引入\n\n```html\n\u003Cscript src=\"https:\u002F\u002Funpkg.com\u002F@xunlei\u002Fvue-lazy-component@1.0.7\u002Fdist\u002Fvue-lazy-component.js\">\u003C\u002Fscript>\n```\n\n### 2. 模版语法\n\n```html\n \u003Cvue-lazy-component\n  @init=\"init\"\n  @beforeInit=\"beforeInit\"\n >\n  \u003C!-- real component-->\n  \u003Cst-series-sohu\u002F>\n  \u003C!-- skeleton component -->\n  \u003Cst-series-sohu-skeleton slot=\"skeleton\"\u002F>\n\u003C\u002Fvue-lazy-component>\n```\n\n## Props\n\n| 参数                    | 说明  | 类型 | 可选值 | 默认值 |\n|-------------------------|-------|------|--------|--------|\n| viewport | 组件所在的视口，如果组件是在页面容器内滚动，视口就是该容器 | HTMLElement | true      | `null`，代表视窗 |\n| direction | 视口的滚动方向, `vertical`代表垂直方向，`horizontal`代表水平方向  | String | true      | `vertical` |\n| threshold | 预加载阈值, css单位  | String | true      | `0px` |\n| tagName | 包裹组件的外层容器的标签名  | String | true  | `div` |\n| timeout | 等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载  | Number | true    | - |\n\n## Events\n\n| 事件名                    | 说明  | 事件参数\n|-------------------------|-------|------|\n| before-init | 模块可见或延时截止导致准备开始加载懒加载模块 | - |\n| init | 开始加载懒加载模块，此时骨架组件开始消失 | - |\n| before-enter | 懒加载模块开始进入 | el |\n| before-leave | 骨架组件开始离开 | el |\n| after-leave | 骨架组件已经离开 | el |\n| after-enter | 懒加载模快已经进入 | el |\n| after-init | 初始化完成 | - |\n\n## 注意 \u002F Notes\n\n> 1. 该项目依赖 [IntersectionObserver API](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FIntersection_Observer_API)，如需在较低版本浏览器运行，需要引入 **IntersectionObserver API polyfill**\n\n### IntersectionObserver API polyfill\n\nhttps:\u002F\u002Fgithub.com\u002Fw3c\u002FIntersectionObserver\u002Ftree\u002Fmaster\u002Fpolyfill\n\n\n> 2. webpack 分包异步加载方式依赖 `Scoped Component Slots`, 需要 Vue 版本大于2.1.0\n\n\n- https:\u002F\u002Fcn.vuejs.org\u002Fv2\u002Fguide\u002Fcomponents.html#作用域插槽\n\n## Development Setup\n\n``` bash\n# install deps\nnpm install\n\n# serve demo at localhost:8080\nnpm run dev\n\n# build library and demo\nnpm run build\n\n# build library\nnpm run build:library\n\n# build demo\nnpm run build:demo\n\n# commit use commitizen\nnpm run commit\n\n# pre publish\nnpm run prepublish\n\n# generate changelog\nnpm run changelog\n```\n\n## Roadmap\n\n- [x] SSR 支持 @ v1.1.0\n\n- [ ] UI单元测试 @ v1.2.0\n\n- [ ] 减少性能开销 @ v1.3.0\n\n## License\n\n[MIT](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\nCopyright (c) 2017 XunleiF2E\n","Vue Lazy Component 是一个针对 Vue.js 2.x 的组件级懒加载解决方案。它支持在组件可见或即将可见时进行懒加载，同时提供延时加载功能，并能在真实组件加载前展示骨架组件以提升用户体验。此外，该插件还支持将真实组件代码分包异步加载。适用于需要优化页面加载性能、减少初始加载时间的场景，特别是对于大型应用或单页应用来说非常有用。通过简单的配置即可轻松集成到现有项目中。",2,"2026-06-11 03:20:53","top_language"]