vue.js v1 懒加载实践

vue指南说，可以异步加载component

vue指南 => 异步加载组件

注意

下面的内容假设你已经学会:

• webpack2
• promise
• vue-router

虽然实现了异步加载组件，但这只是异步下载啊(需要渲染这个组件时才开始下载)，确实是按需加载，想像一下。异步加载非首屏组件，用户在app首屏点击跳转到尚未加载完成的路由组件时，vue会等待加载完成才开始渲染组件，我们看到的行为就是，用户疯狂点击跳转，下载结束之前却没有任何反应，当然你可以加个进度条啥的提示一下，但是体验仍然是极差的， 我们需要把带进度显示的一个组件的"外壳"在首屏时就下载下来，路由进入到"外壳"组件中时再显示进度条，并加载实际内容的组件

我们可以把异步加载的放到vue-router的data hook方法中.

1. 实现路由数据加载进度条 参考vue-router的文档

2. 加载数据的同时，加载当前组件需要的内容组件.

我们把一个页面的路由分离为两个组件，例如我们有一个优惠券列表页面,
则分可离为CouponList组件与CouponListContent组件。

Loading组件

Loading组件只在正在加载页面数据时显示

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的主入口打包的,

完整代码涉及很多内部业务，不方便放出，只摘录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提示，所以我也没用单文件写法