Vue 异步加载组件（高级）

异步组件

• import() 函数
• 按需加载，异步加载大组件

举个列子，比如有个 FormDemo.vue 大组件

<template>
    <div>
        表单编辑器大组件
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

然后实现按需加载的效果

<template>
    <div>
        <!--异步加载组件-->
        <FormDemo v-if="showFormDemo"/>
        <button @click="showFormDemo=true">加载 FormDemo</button>
    </div>
</template>
<script>
    export default {
        name: "index",
        components: {
            // 按需加载，可以看下浏览器 network 的效果
            FormDemo: () => import('./FormDemo')
        },
        data() {
            return {
                showFormDemo: false
            }
        }
    }
</script>