提高首页访问速度 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 好使！

---

Welcome to my Blog