vue指南说，可以异步加载component
注意
下面的内容假设你已经学会:
- webpack2
- promise
- vue-router
虽然实现了异步加载组件，但这只是异步下载啊(需要渲染这个组件时才开始下载)，确实是按需加载，想像一下。异步加载非首屏组件，用户在app首屏点击跳转到尚未加载完成的路由组件时，vue会等待加载完成才开始渲染组件，我们看到的行为就是，用户疯狂点击跳转，下载结束之前却没有任何反应，当然你可以加个进度条啥的提示一下，但是体验仍然是极差的， 我们需要把带进度显示的一个组件的"外壳"在首屏时就下载下来，路由进入到"外壳"组件中时再显示进度条，并加载实际内容的组件
我们可以把异步加载的放到vue-router的data hook方法中.
实现路由数据加载进度条 参考vue-router的文档
加载数据的同时，加载当前组件需要的内容组件.
我们把一个页面的路由分离为两个组件，例如我们有一个优惠券列表页面,
则分可离为CouponList组件与CouponListContent组件。
Loading组件
Loading组件只在正在加载页面数据时显示
<div class="loading-mask" v-if="show">
<div class="loading-wrapper">
<div class="loading-container">
<pulse-loader :loading="loading" :color="color" :size="size"></pulse-loader>
</div>
</div>
</div>
import './loading.scss'
import { PulseLoader } from 'vue-spinner/dist/vue-spinner.min.js'
import template from './loading.html'
export let LoadingComponent = {
template,
data() {
return {
size: '1rem',
color: 'white'
}
},
props: {
show: {
type: Boolean,
required: true
}
},
components: {
PulseLoader
}
}
.loading-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
transition: opacity .2s ease;
}
.loading-wrapper {
display: table-cell;
vertical-align: middle;
.v-bounce {
margin: auto;
}
}
.loading-container {
background-color: rgba(0, 0, 0, .3);
border-radius: 50%;
width: 6.5rem;
height: 6.5rem;
margin: 0 auto;
padding-top: 2.5rem;
}
CouponList组件
CouponList只是一个空壳，但是是跟随webpack的主入口打包的,
<div class="coupon-list-page">
<loading :show="$loadingRouteData || paused">
</loading>
<coupon-list-content v-if="!$loadingRouteData"
:paused.sync="paused"></coupon-list-content>
</div>
完整代码涉及很多内部业务，不方便放出，只摘录data hook中的内容.用Promise.all组合数据加载的Promise与Webpack2的System.import异步加载代码的Promise并返回给vue-router,如此一来，路由数据加载的过程就包含了数据与组件代码(webpack分离出的chunk静态文件会被浏览器缓存起来)的加载了,把此页面的内容分离到CouponListContent里去，在此处异步加载即按需加载了，data hook只有进入此页面时才会执行，此时正是需要此页面的时候，所以是按需加载。
值得注意的是extract-text-webpack-plugin不能提取System.import引入的css
route: {
data() {
return Promise.all([
this.$http.get(`${urlPrefix}/order/coupons`, {
params: {
orderNo,
tempOrderNo
}
})
.then((res) => res.json())
.then((resJson: WrappedResponse) => {
store.dispatch(UPDATE_COUPONS_STATE, resJson.data);
return true;
})
.catch(catchRequestError),
System.import('./coupon-list-content')
.then(module => {
Vue.component('CouponListContent', module.default)
})
])
}
}
CouponListContent可以是任何东西，我就不贴代码了，非常抱歉没能贴出完整代码，像我这么懒的，可不愿意去特意精简一下代码再放出来,有什么问题可以直接问我.有人问我为什么不直接贴.vue单文件组件的代码，vscode不支持.vue内的js提示，所以我也没用单文件写法
