提升首頁訪問速度 and 記錄一次Nuxt天坑

原由

將整個博客用 Nuxt 重構完成以後我發現首頁訪問速度仍是不盡人意，白屏時間確實大大縮短，可是背景出現到最近文章出現這中間仍是有比較長的一段時間，

也就是說第一次網絡請求比較慢，那有沒有辦法解決呢，首先我就想到使用 「CDN」。

CDN 加速

CDN 的全稱爲內容分發網絡，通俗的來講就是把網站內容給複製到全國各個地方的節點上去，用戶訪問就從最近的節點拿，因而用騰訊雲將個人網站添加進了騰訊雲的 CDN 。可是訪問速度並無肉眼可見的提高，這是爲何呢，我進行了一番思考。

制約我網站首頁加載速度的已經不是首頁白屏了，而是第一次請求最近文章，即便使用了 CDN 提高了打開網站的速度，可是瀏覽器獲得網頁以後請求最近文章仍是受制於個人服務器，既然這樣的話能不能把最近文章在服務器端渲染好而後再一塊兒瀏覽器，兩次請求就變爲了一次，至關於首頁就變成了靜態頁面，CDN 也可以緩存到最近文章數據。
二話不說開始翻文檔，果真主打服務端渲染的 Nuxt 擴展了 Vue.js，增長了一個叫 「asyncData」 的方法，使得咱們能夠在設置組件的數據以前能異步獲取或處理數據。

使用 asyncData 方法

通俗來說就是這個方法裏的函數會在服務器裏面的時候就被調用，而不是在用戶瀏覽器中才被調用。這樣就達到了上文所說的那種效果，第一次返回網頁就已經包括了最近文章數據，代碼以下

async asyncData({ $axios }) {
    try {
      let { data } = await $axios.post("/recent");    //有誤
      return { list: data.data };
    } catch (e) {
      console.log(e);
    }
  },

按照道理來講如今首頁訪問速度應該快如閃電了吧，行雲流水的部署，卻發現首頁根本沒有加載出來數據，看控制檯也沒有報錯，咋回事？沒用嗎，這個請求放在 methods 是徹底沒問題的啊。因而開始了漫長的排錯之旅。

Axios 在 asyncData 方法中使用問題

試着用 try 捕捉了一下錯誤，發現這段代碼是在服務端就被運行了，因此打印和報錯信息都在後端顯示，怪不得瀏覽器中一切安好。打印報錯信息又被請求體中返回的網站源碼覆蓋看不到報錯信息，找遍了百度也沒有相似的解決方案，又上 Google 搜索 axios 在 asyncData 中的報錯，卻是有幾個，解決方法是從新定義一份 Axios 配置文件，試過以後仍是無濟於事。

到這裏我就隱約感受到應該是 axios 的配置有問題，多是和這段函數是在服務器運行有關。斷斷續續被折磨了幾天後決定仍是想辦法看報錯信息，因而用手機連拍功能，在報錯信息刷出來的一瞬間拍下來了，發現居然是 404 錯誤。這怎麼可能，查看請求體中 request 的網址是 http://127.0.0.1:3002/recent 這就很奇怪了，個人 axios 是設置了 browserBaseURL 是 /api 的，正確的請求地址應該是 http://127.0.0.1:3002/api/recent，不知道爲何 asyncData 中的請求卻沒有添加上這個前綴，果真是這個請求沒有使用全局的配置文件，限於技術水平我也就沒有對這個問題進行深挖，直接加上了 /api， 果真好使了。改動後代碼：

async asyncData({ $axios }) {
    try {
      let { data } = await $axios.post("/api/recent");
      return { list: data.data };
    } catch (e) {
      console.log(e);
    }
  },

順便提一句，這個方法只有在頁面組件中才能用，也就是 Page 目錄下的 vue 文件，組件目錄中的 vue 文件是沒有這個方法的，剛開始我就一直在自我懷疑是否是這個不能用.....

上傳部署一鼓作氣，別忘了刷新一次 CDN 緩存，打開網站，果真！很快，肉眼可見的速度提高了。打開控制檯看一下具體的加載時間

網頁全部的信息都在100毫秒內就展現出來了，飛通常的感受，至此首頁訪問速度優化告一段落，由於首頁也沒得圖片，這種速度也是應該的， Nuxt 好使！