本文个人博客地址：https://www.leafage.top/posts/detail/21328R4ITleafage上线有一段时间了，最??近域名已从abeille更改。top改成了leafage.top，之前的一些搜索引擎几乎消失了。虽然abeille.top仍然保留访问权限，但最晚要到今年11月才会不再使用。目前暂定使用leafage.top。主页是多个模块组件的组合，包括：hero：最近3条记录featured：除最新3条以外的记录topPosts：访问最多的3条记录postsList：按创建时间排序的记录sidebar：默认的5条记录排序规则推荐：最新6条记录在前，每个组件自己请求加载数据，然后从页面排版，一条一条请求数据，导致需要等待所有组件加载完成页面的数据请求后，继续渲染，阻塞时间很长。通过speedtest测试后，首页阻塞时间达到4s之多。之前介绍过asyncData()和fetch()会阻塞页面加载，直到数据加载完成，所以可以通过减少数据请求时间来缩短页面加载时间。由于之前每个组件都是单独请求数据的，所以组件内容会按照布局顺序渲染，数据请求接口也会依次发送。于是就有了缩短时间的想法。让这些组合的组件数据同时被请求，那么最大阻塞时间就是多个请求中最长请求的时间，最多在几百毫秒以内。里面。但是看了axios官方介绍，在next.js中不能使用axios.all([method1(),method2()])，需要通过Promise.all([method1(),method2()])同时通过数组接收导出结果。示例如下：asyncasyncData({app:{$axios}}){const[heroDatas,featuredDatas,topDatas,listDatas,recommendedDatas,]=awaitPromise.all([await$axios.$get(SERVER_URL.posts.concat("?page=0&size=3")),等待$axios.$get(SERVER_URL.posts.concat("?page=1&size=4")),等待$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")),]);返回{heroDatas,featuredDatas,topDatas,listDatas,recommendDatas};}，完成本次优化后，首页加载速度降到了0.4s，超过一星半。
