vue异步组件

1.异步组件在项目执行的时候不加载，而是在需要的时候加载。可以减少打包的结果。会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。不使用异步组件，如果组件功能比较多打包出来的结果就会变大。

2.异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件的分割加载，import语法是webpack提供的，采用的就是jsonp。

<template>
    <div>
        <button @click="changeCom">显示Node</button>
        <component :is="currentCom"></component>
    </div>
</template>
<script>
const NodeOne=()=>import('./NodeOne')
const NodeTwo=()=>import('./NodeTwo')
export default{
    components:{
        NodeOne,
        NodeTwo
    },
    data(){
        return{
            currentCom:NodeOne,
            flag:false
        }
    },
    methods:{
        changeCom(){
            if(this.flag){
                this.currentComponent = NodeOne
                this.flag = false
            }else{
                this.currentComponent = NodeTwo 
                this.flag = true
            }
        }
    }
}
</script>