溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“nuxt.js頁面初始化加載優化的方法教程”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“nuxt.js頁面初始化加載優化的方法教程”吧！
leafage上線已經有一段日子了，最近將域名從abeille.top換到了leafage.top，之前所做的一些搜索引擎的收錄幾乎都沒有了，雖然abeille.top還保留訪問，但是最晚到今年11月就不再用了，目前暫定使用 leafage.top。
首頁是有多個模塊的的組件組合而成的，包括：
hero：最新三條記錄
featured：除過最新的三條之后的記錄
topPosts：訪問量最多的三條記錄
postsList：根據創建時間排序的記錄
sidebar：默認排序規則的5條記錄
recommend：最新的6條記錄
在之前呢，每個組件自己請求加載數據，那就會是從頁面排版，逐個進行數據請求，這樣導致了頁面要完成加載就需要等待所有組件的數據請求之后，繼續進行渲染，阻塞時間很長，通過speedtest測試，首頁阻塞時間達4s之多。
之前介紹過asyncData()和fetch()都會阻塞頁面加載，直到數據加載完成才會繼續，那就可以通過減少數據請求時間來縮短頁面加載時間。由于之前每個組件都是各自請求數據，所以會按照排版進行順序渲染組件內容，那也就會順序發送數據請求接口。
那么縮短時間的思路就有了，讓這些組合的組件數據，同時去請求，那么它阻塞的時間最大限度是多個請求中耗時最長的那個請求的時間，這個頂多在幾百毫秒之內。
然而在看了axios的官方介紹，使用axios.all([method1(), method2()])，并不能在next.js中使用，需要通過Promise.all([method1(), method2()])來實現，同時導出結果通過數組來接收，示例如下：
async asyncData({ app: { $axios } }) { const [ heroDatas, featuredDatas, topDatas, listDatas, recommendDatas, ] = await Promise.all([ await $axios.$get(SERVER_URL.posts.concat("?page=0&size=3")), await $axios.$get(SERVER_URL.posts.concat("?page=1&size=4")), await $axios.$get(SERVER_URL.posts.concat("?page=0&size=3&order=viewed")), await $axios.$get(SERVER_URL.posts.concat("?page=0&size=10&order=likes")), await $axios.$get(SERVER_URL.posts.concat("?page=0&size=6&order=viewed")), ]); return { heroDatas, featuredDatas, topDatas, listDatas, recommendDatas }; },
在完成此項優化后，首頁加載速度降到了0.4s，提高了不止一星半點呀。
感謝各位的閱讀，以上就是“nuxt.js頁面初始化加載優化的方法教程”的內容了，經過本文的學習后，相信大家對nuxt.js頁面初始化加載優化的方法教程這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
