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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM