第一种方式

component:function(resolve){
                setTimeout(()=>{
                    require(['@/components/new/new'],resolve)
                },0) 
//模拟延迟加载

第二种方式

路由懒加载

1 .里面有其他异步加载组件怎么办，也就是说现在懒加载的仅仅是路由最外层的组件
2 .引入的时候

const newTh=()=>import('@/components/new/new')

3 .使用的时候按照正常语法使用

第三种方式

1 .正常组件内的异步加载
2 .定义高级组件，在加载超时和加载失败的时候进行相应组件的替换

function lazyLoadView(AsyncView){
    const AsyncHandler=()=>({
        component:AsyncView,
        loading:require('@/components/base/loading/10').default,
        error:require('@/components/base/loading/l2').default,
        delay:200,
        // 显示加载时组件的延时时间，默认是200ms
        timeout:1000,
        // 如果加载时间超过10000则显示错误组件
    })

    return Promise.resolve({
        functional:true,
        render(h,{data,children}){
            return h(AsyncHandler,data,children)
        }
    })
}

3 .使用异步组件出现路由导航函数失效的情况
4 .版本必须是2.4以上
5 .

命名chunk

1 .

写成组件

<template>
    <keep-alive>
        <!-- 这里有做缓存的 -->
        <component v-bind:is="componentFile"></component>
    </keep-alive>
</template>
<script>
export default {
    props:{
        path:{
            type:String,
            require:true,
            default:''
        }
    },
    data(){
        const componentFile=this.render;
        return {
            componentFile:componentFile
        }
    },
    methods:{
        render(){
                this.componentFile =(resolve)=>({
                    component: import(`@/${this.path}`),
                    loading: { template: '<div style="height: 100%; width: 100%; display: table;"><div style="display: table-cell; vertical-align: middle; text-align: center;"><div>加载中</div></div></div>' },
                    error:  { template: '<div style="height: 100%; width: 100%; display: table;"><div style="display: table-cell; vertical-align: middle; text-align: center;"><div>加载错误</div></div></div>' },
                    delay: 200,
                    timeout: 10000
                });

                // 好像这个只会拉第一次，之后在走到相同的函数时不会触发下载操作的。
                // 1.官方文档明确说明只有在这个组件需要被渲染的时候才会触发这个工厂函数，且会把结果保存起来以供未来渲染。
                
        }
    },
    watch:{
        path(){
            console.log('变了啊')
            this.render();
        }
    }
}
</script>