异步组件

减少首屏体积

工厂函数

• 写法

// vue.component(id, object|function) 工厂函数传入的是一个function
// object 传入的是选项对象 
Vue.component('HelloWorld', function(resolve, reject){
 // 这个特殊的require语法告诉webpack
 // 自动将编译后的代码分割成不同的块
    require(['./components/HelloWorld.vue'], function(res){
        resolve(res)
    })
})

• 通过闭包实现函数只调用一次

// 传入工厂函数有两个参数resolve reject，两个函数都是经过once函数的包装，保护resolve函数只执行一次
export default once (fn: Function):Function {
    let called = false
    return function () {
        if (!called) {
            called = true
            fn.apply(this, arguments)
        } 
    }
}

promise

• 写法

Vue.component('HelloWorld', 
              // 在webpack的作用下，该import函数返回一个promise对象
              () => import('./component/HelloWorld.vue'))

高级异步组件

• 写法

const LoadingComp = {
    template: '<div>Loading</div>'
}

const ErrorComp = {
    template: '<div>error</div>'
}
const AsyncComp = () => ({
    // 需要加载的组件，应当是一个Promist
    component: import('./component/HelloWorld.vue'),
    // 加载中应当渲染的组件
    loading: LoadingComp,
    // 出错时渲染的组件
    error: ErrorComp,
    // 渲染加载中组件前的等待时间，默认： 200ms
    delay: 200,
    // 最长等待时间。超出此时间则渲染错误组件。默认： Infinity
    timeout: 1000
})

Vue.component('HelloWorld', AsyncComp)
            

• 原理
  • 异步组件实现的本质是通过2次渲染（有loading会存在2次以上），先渲染成注释节点，当组件加载成功后，在通过forceRender重新渲染
• 异步组件的3中实现方式中，高级异步组件可以通过简单的配置实现了loadiing、resolve、reject、timeout 4中状态