组件的加载
同步组件在vue-loader的转换下就已经生成一个component对象，然后在整个渲染流程中直接走render函数 > patch > vnode > 真实dom > 挂载 这个流程。
同样异步组件也会走这个流程，但是稍有不同，我们来看看具体流程，而异步组件也有3种写法，第一种：
工厂函数实现异步组件
import Vue from 'vue'
Vue.component('hello ', function(resolve, reject) {
require(['./components/Hello.vue'], function(res){
reslove(res)
})
})
new Vue({...}).$mount('#app')
在 new Vue的具体流程 这篇文章中我们知道渲染流程是要调用render 函数，根据函数调用栈内部是可以找到底层是调用了createComponent这个方法的，重点在这里：
当一个组件是异步组件时，createComponent一开始明显是不能创建出一个对应的vnode的，因为这个组件的js还没有加载完成。看看它是怎么处理这个情况的：
在src/core/instance/render.js里面
继续往下看
可以看到这里调用了resolveAsyncComponent，看里面内容：
这个方法里面定义加载成功、失败的回调，还有一些静态属性表示是否加载成功，成功的结果等，最后返回结果，这个结果里面有多种情况：
加载失败的组件、加载成功的组件、loading组件、undefined。
回到我们上面的逻辑，一开始只能走undefined了。
Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
// return a placeholder node for async component, which is rendered
// as a comment node but preserves all the raw information for the node.
// the information will be used for async server-rendering and hydration.
return createAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
然后是undefined就调用createAsyncPlaceholder方法，这里就是一个返回一个注释节点，相当于一个占位符。
当组件加载成功的时候，就会调用resolve回调，看看具体实现：
其实就是调用forceUpdate()方法强制更新一遍组件
再看看
Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}
里面又调用_update方法,那这里就走通了，_update里面就是patch > vnode > 真实dom > 挂载这个流程，此时再回到createComponent的流程时,继续调用resolveAsyncComponent方法，
// async component
let asyncFactory
if (isUndef(Ctor.cid)) {
asyncFactory = Ctor
Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
// return a placeholder node for async component, which is rendered
// as a comment node but preserves all the raw information for the node.
// the information will be used for async server-rendering and hydration.
return createAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
}
然后里面的逻辑只走到
if (isDef(factory.resolved)) {
return factory.resolved
}
就结束了，因为此时 factory.resolved已经有加载好的结果了，后面的流程就是正常的渲染挂载了。
总结一下异步组件的工厂函数方式走的流程：
1、第一次渲染拿一个注释节点占位，然后执行这个工厂函数
2、执行工厂函数成功后就强制刷新一次，此时就能渲染出真实的组件节点了。
下面介绍第二种异步组件的方式
Promise实现异步组件
改一下上面的代码为：
import Vue from 'vue'
Vue.component('hello ', () => import('./components/Hello.vue'))
new Vue({...}).$mount('#app')
这样大家应该比较熟悉，并不是说这种写法是Promise,只不过这样子写经过webpack处理就会返回一个Promise而已
同样走上面第一种方式要走的流程，只不过在第一次执行这个函数的时候返回一个Promise就进入下面的流程：
const res = factory(resolve, reject)
// 都执行了这句，第一种工厂函数方式返回undefined，这种就返回一个Promise
然后这里同样通过res.then(resolve, reject)传入加载成功、失败回调，剩下的流程就和第一种方式一样了。
高级异步组件
其实这个是Vue提供非常完善的一种加载异步组件的方式了：
import Vue from 'vue'
import ErrorComp from './ErrorComp.vue'
import LoadingComp from './LoadingComp.vue'
Vue.component('hello', () => {
component: import('./components/Hello.vue'), // 返回一个Promise
loading: LoadingComp, // 加载中组件
error: ErrorComp, // 加载错误组件
delay: 200, // 延迟渲染时间
timeout: 1000 // 加载超时时间
})
new Vue({...}).$mount('#app')
流程的话其实和上面的差不多，唯一不同就是走下面红框里面的流程，然后就是流程包括了loading\error的情况的考虑。
总结
以上就是三种异步组件的加载方式的流程分析，开发中用得多都是第2，3种，如果是细心的同学会发现异步组件resolve都会强刷渲染，这里可以给个性能提升的提示：就是把多个异步组件利用webpack的魔法注释合成一个异步组件，如果这些组件体积都不大的话。
