关于vue.js:Leafage-诞生记五

本文集体博客地址：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，进步了不止一星半点呀。