nuxt 優化項:禁用js的預加載

這裏有個nuxt和vue不一樣的地方,這個地方頗有意思,官方的中文文檔說得蜜汁自信vue

-------------------------------api

In production, nuxt.js uses the prefetch strategy to pre-fetch the pages bundle that will be required when navigating to the next page. When the user will click on a link, nuxt.js will already have pre-fetched the page and the navigation will feel instant while keeping the code splitted.瀏覽器

在生產模式下,Nuxt.js 使用瀏覽器的預加載)策略來預加載目標頁面的腳本資源。因此當用戶點擊某個連接時,會有一種秒開的感受。預加載策略使得 Nuxt.js 既能夠保持代碼分離又能保證頁面訪問體驗。fetch

prefetch 特性示例 (請查看當前打開頁面的 <head> 標籤):ui

 

<link rel="prefetch" href="/_nuxt/0.nuxt.bundle.61ba3fe4687aed56a098.js">
<link rel="prefetch" href="/_nuxt/1.nuxt.bundle.0e300058ecb654f36fb7.js">
<link rel="prefetch" href="/_nuxt/2.nuxt.bundle.2617656a084bb6760331.js">

-------------------------------spa

會有一種秒開的感受,在項目並非很大的時候,體驗確實不錯,我說的這個項目不是很大,我的感受若是路由超過30個頁面,基本就算大項目了(一家之言,具體視本身的實際狀況而定),首頁加載基本也沒什麼區別,能夠加速其餘頁面的加載速度。nuxt

可是做爲APP內嵌的網頁來講,這種靠預加載資源,加速其餘頁面的訪問速度,意義不是很大。網頁頁面不少,對用戶來講,用戶可能訪問的頁面不足十分之一,預加載全部資源有點浪費。這種狀況下,訪問哪些頁面,加載哪些頁面的資源更爲實際。3d

因此,我就須要直接幹掉了prefetch
code

這時候查看官方文檔的我又踩了個文檔的坑blog

由於一直看的是中文文檔,基本屬性設置按照中文文檔設置啥的都沒什麼問題,可是在官方中文文檔裏,禁用此特性的屬性很容易就能找到:

 

而後配置也很簡單:

但是,就是沒什麼用...

這裏省略一萬字的找緣由,找解決辦法的過程....

最後在英文的文檔裏找到新的屬性設置

英文的說明也很對啊

當有不少頁面和路由時候,你可能想禁用此特性。

不是可能想禁用,禁用仍是頗有必要的!

官方應該只更新英文的文檔,中文的已經落後了好幾個版本了,因此建議你們仍是以英文文檔爲主!

若是以上問題恰好是你一度左思右想解決不了的,但願能給你省點作無謂的鬥爭的時間。

相關文章
相關標籤/搜索