Vue如何配合webpack异步加载组件？

Question

我的需求是这样的：
单页面应用中有一个很大的组件，如果在初始化的时候加载这个组件加载的速度会变得很慢。所以，我想在异步加载这个组件。现在大致的想法如代码所示：

<template>
    <div class="code-wrapper">
        <div v-if="loading">loading...</div>
        <big-component v-else></big-component>
    </div>
</template>
<script>
export default {
    data(){
        return {
            loading:true
        }
    },
    mounted(){
        //request <big-component> asynchronously here
    }
}
</script>

我想请问，有什么比较好的解决方案，并且如何配合webpack的code splitting一起使用呢？

Answer 1

直接用这个函数：require.ensure

看文档：require.ensure and AMD require is asynchronous