浅析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>