Leafage 诞生记（五、nuxt.js 页面初始化加载优化）

骑猪看日落 2022-11-14 11:53 127阅读 0赞

本文个人博客地址：[https://www.leafage.top/posts/detail/21328R4IT][https_www.leafage.top_posts_detail_21328R4IT]

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，提高了不止一星半点呀。

[https_www.leafage.top_posts_detail_21328R4IT]: https://www.leafage.top/posts/detail/21328R4IT
[abeille.top]: https://www.abeille.top
[leafage.top]: https://www.leafage.top