Vue 异步组件

背景

当一个组件非常大时，可以在什么时候用到了，再去加载，而不是一开始就去加载。从而优化页面的渲染速度。

使用异步组件

<template>
    <div>
        <!-- 异步组件 -->
        <AsyncDemo v-if="isShow"/>
        <button @click="isShow = true">show form demo</button>
    </div>
</template>
export default {
    components: {
        AsyncDemo: () => import('../BaseUse/ AsyncDemo'),
    },

上面这段代码，在页面刚开始加载时，因为isShow默认是 false， AsyncDemo组件不需要被显示，所以这个组件也不会被加载进来。
但通过点击 button，isShow变成 ture时，AsyncDemo组件才会被加载进来。
这种方式只有当某个组件，真正需要的时候才会被加载进来。因此我们也可以将这种方式叫做 按需加载。
这种方式的好处是，一开始不需要将全部组件都加载进来，加快首屏的渲染速度。

参考资料

https://cn.vuejs.org/v2/guide/components-dynamic-async.html#异步组件