0

我正在尝试寻找使我的网站加载速度更快的方法，并且在运行速度测试后，我了解到我在从内容加载数据的方式上犯了一个错误。我有一个页面，其中列出了所有博客（在博客列表中只显示了它们title和image一些其他详细信息），而不是仅从内容加载必要的字段，我正在加载每个数组项的所有字段（post) 的数组posts，这自然会占用大量时间并使我的页面变慢。如何仅从博客列表页面的内容加载特定字段，但在我们单击列表中的单个博客时加载所有字段。我正在使用 react static，这就是我的配置文件如何查找路径/blog是主博客列表页面的帖子部分和/container/Post是个人博客页面。

let posts = await client
      .getEntries({
        content_type: "blogPost",
        order: "-sys.createdAt",
        include: 1,
      })
      .then((response) => response.items)
      .catch(console.error);
    console.log("Post -> ", posts.length);

    posts = posts.sort((a, b) => {
      let keyA = new Date(a.fields.date);
      let keyB = new Date(b.fields.date);
      // Compare the 2 dates
      if (keyA < keyB) return 1;
      if (keyA > keyB) return -1;
      return 0;
    });

在我的退货声明中

{
        path: "/blog",
        getData: () => ({
          posts,
        }),
        children: posts.map((post) => ({
          path: `/${urlBuilder(
            post.fields.url ? post.fields.url : post.fields.title
          )}`,
          template: "src/containers/Post",
          getData: () => ({
            post,
          }),
        })),
      },

这就是我从内容中posts返回的样子

在此处输入图像描述

4

1 回答 1

2

您可以使用运算符实现此目的select。当使用内容丰富的 sdk 时，这会转化为如下内容：

const contentful = require('contentful')

const client = contentful.createClient({
  space: '<space_id>',
  environment: '<environment_id>',
  accessToken: '<content_delivery_api_key>'
})

client.getEntries({
  content_type: '<content_type_id>',
  select: 'sys.id,fields.<field_name>'
})
.then((response) => console.log(response.items))
.catch(console.error)

请特别注意该select: 'sys.id,fields.<field_name>'部分。您可以在此处仅指定要返回的字段。

于 2021-07-02T02:37:11.440 回答