异步按需加载组件

第一种方式

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 .

写成组件