浅析Nuxt.js的智能预读取及预加载规则和如何设置预加载

一、nuxt 的智能预读取

Nuxt 2.4中发布了Nuxt.js的一个新特性，称为智能预读取，它与universal mode相结合，提供了更好的用户体验。

　　使用此功能（默认情况下已启用），当 nuxt-link 路由在视口中可见时（即页面滚动到路由入口元素时），Nuxt.js将自动下载链接目标页面所需要的 javascript。当单击路由跳转时，JavaScript已经将目标组件准备好了，目标页几乎立刻渲染呈现，而不是等待组件下载。

　　如上图所示，起初未加载 js，当滚动到在 视口 中时，加载了 js。再如下面一图：

　　如上图的视频中，在点击 create 之前，已经预加载 9acb22e.js(create.js)。现在进入 /create 可立即执行JavaScript，而不必等待网络请求。

二、预加载规则

　　官网信息可查看这里：https://nuxtjs.org/docs/features/nuxt-components/#the-nuxtlink-component

1、预加载规则：

　　Nuxt.js仅在浏览器不忙时加载资源，如果连接处于脱机状态或只有2g连接，则跳过预取。

2、手动控制

（1）禁用特定链接的预加载

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

（2）全局禁用预加载

export default {
  router: {
    prefetchLinks: false
  }
}

（3）指定某个为预加载，则添加prefetch即可

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>