nuxtjs 的 nuxt-link 的 no-prefetch 的原理剖析

[xinpianchang]

nuxtjs 的 nuxt-link 的 no-prefetch 的原理剖析

[tyz98]

prefetchLink方法加载Components的核心代码

observer.unobserve(this.$el)

const Components = this.getPrefetchComponents()

for (const Component of Components) {
  const componentOrPromise = Component()
  if (componentOrPromise instanceof Promise) {
    componentOrPromise.catch(() => {})
  }
  Component.__prefetched = true
}

首先要unobserve这个el, 之后通过getPrefetchComponents()取得所有需要prefetch的components

getPrefetchComponents () {
  const ref = this.$router.resolve(this.to, this.$route, this.append)
  const Components = ref.resolved.matched.map(r => r.components.default)

  return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
},

涉及到的api、概念等：

• router.resolve方法API
• route.matched
• components.default
• 最终返回的Components数组经过了typeof Component === 'function'的筛选，这涉及到了vue的异步组件
• 结合vue的异步组件和webpack代码分割功能实现路由懒加载

也就是说，这里取出了nuxt-link目标路由的所有嵌套路由记录中包含的异步组件

之后就用for循环执行异步组件的加载，并把它的__prefetched状态标记为true，表示已经被prefetch(这个状态也用于getPrefetchComponents方法中筛选尚未被prefetch的Components)