一、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>