Skip to content

Commit

Permalink
feat(main): Add chunks example
Browse files Browse the repository at this point in the history
  • Loading branch information
@binggg
binggg committed Sep 11, 2017
1 parent 5a2c02a commit 3518f4e
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 107 deletions.
9 changes: 7 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,17 @@ export default {
| tagName | 包裹组件的外层容器的标签名 | String | true | `div` |
| timeout | 等待时间，如果指定了时间，不论可见与否，在指定时间之后自动加载 | Number | true | - |


## Events

| 事件名 | 说明 | 事件参数
|-------------------------|-------|------|
| update:show | 右键菜单显示/隐藏时触发 | 是否显示 |
| before-init | 模块可见或延时截止导致准备开始加载懒加载模块 | - |
| init | 开始加载懒加载模块，此时骨架组件开始消失 | - |
| before-enter | 懒加载模块开始进入 | el |
| before-leave | 骨架组件开始离开 | el |
| after-leave | 骨架组件已经离开 | el |
| after-enter | 懒加载模快已经进入 | el |
| after-init | 初始化完成 | - |


## 注意
Expand Down
16 changes: 15 additions & 1 deletion demo/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<router-link class="link" to="/large-page">Demo1: 超长页面懒加载</router-link>
<router-link class="link" to="/timeout">Demo2: 延时加载</router-link>
<router-link class="link" to="/custom-transition">Demo3: 自定义过渡效果</router-link>
<router-link class="link" to="/large-page-chunks">Demo4: 超长页面懒加载（分包）</router-link>
</header>
<router-view class="page-container"></router-view>
</div>
Expand Down Expand Up @@ -47,7 +48,7 @@
top: 0;
z-index: 199;
width: 100%;
background: rgba(255, 255, 255, .9);
background: rgba(255, 255, 255, .95);
padding: 24px;
text-align: center;
}
Expand Down Expand Up @@ -84,5 +85,18 @@
color: #42b983;
font-weight: bold;
}
summary {
font-size: 14px;
cursor: pointer;
line-height: 3;
background:rgba(255,255,255,.9);
padding: 10px 16px;
margin: 8px 0;
}
summary:focus {
outline: none;
}
</style>

10 changes: 5 additions & 5 deletions demo/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ const router = new Router({
alias: '/',
component: (resolve) => require(['../views/LargePage'], resolve)
},
// {
// path: '/large-page-chunks',
// name: 'LargePageChunks',
// component: (resolve) => require(['../views/LargePageChunks'], resolve)
// },
{
path: '/large-page-chunks',
name: 'LargePageChunks',
component: (resolve) => require(['../views/LargePageChunks'], resolve)
},
{
path: '/large-page-not-lazy',
name: 'LargePageNotLazy',
Expand Down
2 changes: 1 addition & 1 deletion demo/views/CustomTransition.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="index-d3 switch">
<div class="d3-more" style="display: block;">
<h2>自定义骨架组件和真实组件切换的过渡效果</h2>
<details open="true">
<details>
<summary>查看代码示例</summary>
<pre v-highlightjs="code"><code class="css">{{ code }}</code></pre>
</details>
Expand Down
4 changes: 2 additions & 2 deletions demo/views/LargePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<div style="height: 100%;">
<div class="index-d3 switch">
<div class="d3-more" style="display: block;">
<h2>模块即将可见时自动加载</h2>
<details open="true">
<h2>组件将可见时自动加载</h2>
<details>
<summary>查看代码示例</summary>
<pre v-highlightjs="code"><code class="html">{{ code }}</code></pre>
</details>
Expand Down
182 changes: 91 additions & 91 deletions demo/views/LargePageChunks.vue
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,50 @@
<template>
<div style="height: 100%;">
<div class="index-d3 switch">
<div class="center-box" style="margin-top: -353px; height: 353px;">
<div class="screen">
<header class="header nav-type2">
<div class="head">
<nav class="nav">
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-vip ani-nav"></span>
<span class="text">会员</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-movie "></span>
<span class="text">电影</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-tv "></span>
<span class="text">电视剧</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-game "></span>
<span class="text">游戏</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-show "></span>
<span class="text">美女</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-lx "></span>
<span class="text">离线空间</span>
</a>
<a target="_blank" href="javascript:;">
<span class="ico-nav ico-home "></span>
<span class="text">我的主页</span>
</a>
</nav>
<div class="search">
<div class="sea-box"><input type="text" class="ipt-sea">
<a href="javascript:;" title="搜资源" class="btn-sea bg-com">
<span class="ico-t-sea"></span>
</a>
<a href="javascript:;" title="清除" class="btn-sea-clear"></a>
<div class="drop-sea" style="display: none;">
<!---->
<!---->
<!---->
</div>
</div>
<span class="ico-sea"></span>
</div>
<a href="javascript:;" class="ico-h-play"></a>
</div>
</header>
<div style="position: relative;">
<div>
<div class="d3-wrap mask-ani">
<!---->
<div class="show-more">
<a href="javascript:;" title="更多精彩内容" class="link-show-more hidden">
<span class="ico-scroll-arw"></span>
</a>
<!---->
</div>
<a href="javascript:;" title="视频偏好" class="btn-fav"></a>
<a href="javascript:;" title="收起视频模块" class="close-top"></a>
</div>
</div>
</div>
<div class="wrap-mask" style="display: none;">
<div class="mask-part-1"></div>
<div class="mask-part-2"></div>
<div class="mask-part-3">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div class="d3-more" style="display: block;">
<h2>组件即将可见时自动加载，配合 webpack 做到组件代码异步分包载入</h2>
<details>
<summary>查看代码示例（template）</summary>
<pre v-highlightjs="template"><code class="html">{{ template }}</code></pre>
</details>
<details>
<summary>查看代码示例（js）</summary>
<pre v-highlightjs="js"><code class="javascript">{{ js }}</code></pre>
</details>
<template v-for="i in 10">
<vue-lazy-component>
<st-series-sohu/>
<st-series-sohu-skeleton slot="skeleton"/>
<vue-lazy-component >
<template scope="scope">
<st-series-sohu v-if="scope.loading"/>
</template>
<st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>

<vue-lazy-component>
<st-movie-qq/>
<st-movie-qq-skeleton slot="skeleton"/>
<template scope="scope">
<st-movie-qq v-if="scope.loading"/>
</template>
<st-movie-qq-skeleton slot="skeleton"/>
</vue-lazy-component>

<vue-lazy-component>
<st-live/>
<st-live-skeleton slot="skeleton"/>
<template scope="scope">
<st-live v-if="scope.loading"/>
</template>
<st-live-skeleton slot="skeleton"/>
</vue-lazy-component>

<vue-lazy-component>
<st-niux/>
<st-niux-skeleton slot="skeleton"/>
<template scope="scope">
<st-niux v-if="scope.loading"/>
</template>
<st-niux-skeleton slot="skeleton"/>
</vue-lazy-component>

<vue-lazy-component>
<st-mo-jin/>
<st-mo-jin-skeleton slot="skeleton"/>
<template scope="scope">
<st-mo-jin v-if="scope.loading"/>
</template>
<st-mo-jin-skeleton slot="skeleton"/>
</vue-lazy-component>
</template>
</div>
Expand Down Expand Up @@ -151,6 +90,67 @@ export default {
methods: {
reportFirstScreen () {
}
},
data () {
return {
template: `<vue-lazy-component >
<template scope="scope">
<st-series-sohu v-if="scope.loading"/>
</template>
<st-series-sohu-skeleton slot="skeleton"/>
</vue-lazy-component>
<vue-lazy-component>
<template scope="scope">
<st-movie-qq v-if="scope.loading"/>
</template>
<st-movie-qq-skeleton slot="skeleton"/>
</vue-lazy-component>
<vue-lazy-component>
<template scope="scope">
<st-live v-if="scope.loading"/>
</template>
<st-live-skeleton slot="skeleton"/>
</vue-lazy-component>
<vue-lazy-component>
<template scope="scope">
<st-niux v-if="scope.loading"/>
</template>
<st-niux-skeleton slot="skeleton"/>
</vue-lazy-component>
<vue-lazy-component>
<template scope="scope">
<st-mo-jin v-if="scope.loading"/>
</template>
<st-mo-jin-skeleton slot="skeleton"/>
</vue-lazy-component>`,
js: ` components: {
StMovieQqSkeleton,
StSeriesSohuSkeleton,
StLiveSkeleton,
StNiuxSkeleton,
StMoJinSkeleton,
StMovieQq (resolve) {
require(['@/components/StMovieQq'], resolve)
},
StSeriesSohu (resolve) {
require(['@/components/StSeriesSohu'], resolve)
},
StLive (resolve) {
require(['@/components/StLive'], resolve)
},
StNiux (resolve) {
require(['@/components/StNiux'], resolve)
},
StMoJin (resolve) {
require(['@/components/StMoJin'], resolve)
}
},`
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions demo/views/Timeout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<div style="height: 100%;">
<div class="index-d3 switch">
<div class="d3-more" style="display: block;">
<h2>下方的模块2s后才加载</h2>
<details open="true">
<h2>组件2s后加载</h2>
<details>
<summary>查看代码示例</summary>
<pre v-highlightjs="code"><code class="html">{{ code }}</code></pre>
</details>
Expand Down
14 changes: 11 additions & 3 deletions src/VueLazyComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<template>
<transition-group :tag="tagName" name="lazy-component" style="position: relative;">
<transition-group :tag="tagName" name="lazy-component" style="position: relative;"
@before-enter="(el) => $emit('before-enter', el)"
@before-leave="(el) => $emit('before-leave', el)"
@after-enter="(el) => $emit('after-enter', el)"
@after-leave="(el) => $emit('after-leave', el)"
>
<div v-if="isInit" key="component">
<slot></slot>
<slot :loading="loading"></slot>
</div>
<div v-else-if="$slots.skeleton" key="skeleton">
<slot name="skeleton"></slot>
Expand Down Expand Up @@ -41,7 +46,8 @@
return {
isInit: false,
timer: null,
io: null
io: null,
loading: false
}
},
Expand Down Expand Up @@ -88,6 +94,8 @@
init () {
this.$emit('beforeInit')
this.$emit('before-init')
this.loading = true
this.requestAnimationFrame(() => {
this.isInit = true
this.$emit('init')
Expand Down

0 comments on commit 3518f4e

Please sign in to comment.