nuxt.js頁面初始化加載優(yōu)化的方法教程

這篇文章主要講解了“nuxt.js頁面初始化加載優(yōu)化的方法教程”，文中的講解內(nèi)容簡單清晰，易于學(xué)習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習“nuxt.js頁面初始化加載優(yōu)化的方法教程”吧！

leafage上線已經(jīng)有一段日子了，最近將域名從abeille.top換到了leafage.top，之前所做的一些搜索引擎的收錄幾乎都沒有了，雖然abeille.top還保留訪問，但是最晚到今年11月就不再用了，目前暫定使用 leafage.top。

首頁是有多個模塊的的組件組合而成的，包括：

• hero：最新三條記錄

• featured：除過最新的三條之后的記錄

• topPosts：訪問量最多的三條記錄

• postsList：根據(jù)創(chuàng)建時間排序的記錄

• sidebar：默認排序規(guī)則的5條記錄

• recommend：最新的6條記錄

在之前呢，每個組件自己請求加載數(shù)據(jù)，那就會是從頁面排版，逐個進行數(shù)據(jù)請求，這樣導(dǎo)致了頁面要完成加載就需要等待所有組件的數(shù)據(jù)請求之后，繼續(xù)進行渲染，阻塞時間很長，通過speedtest測試，首頁阻塞時間達4s之多。

之前介紹過asyncData()和fetch()都會阻塞頁面加載，直到數(shù)據(jù)加載完成才會繼續(xù)，那就可以通過減少數(shù)據(jù)請求時間來縮短頁面加載時間。由于之前每個組件都是各自請求數(shù)據(jù)，所以會按照排版進行順序渲染組件內(nèi)容，那也就會順序發(fā)送數(shù)據(jù)請求接口。

那么縮短時間的思路就有了，讓這些組合的組件數(shù)據(jù)，同時去請求，那么它阻塞的時間最大限度是多個請求中耗時最長的那個請求的時間，這個頂多在幾百毫秒之內(nèi)。

然而在看了axios的官方介紹，使用axios.all([method1(), method2()])，并不能在next.js中使用，需要通過Promise.all([method1(), method2()])來實現(xiàn)，同時導(dǎo)出結(jié)果通過數(shù)組來接收，示例如下：

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 };  },

在完成此項優(yōu)化后，首頁加載速度降到了0.4s，提高了不止一星半點呀。

感謝各位的閱讀，以上就是“nuxt.js頁面初始化加載優(yōu)化的方法教程”的內(nèi)容了，經(jīng)過本文的學(xué)習后，相信大家對nuxt.js頁面初始化加載優(yōu)化的方法教程這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！