Astro 5.17构建性能优化实践：从18s到13s

1
import { defineCollection } from "astro:content";
2
import { glob } from "astro/loaders";
3
import { z } from "astro/zod";
4

5
const posts = defineCollection({
6
  loader: glob({
7
    pattern: ["*.{md,mdx}"],
8
    base: "stalux/posts/",
9
    generateId: ({ data }) => String(data["abbrlink"]),
10
    // 注意：这里没有 retainBody 选项，默认为 true
11
  }),
12
  schema: z.object({
13
    title: z.string(),
14
    abbrlink: z.string(),
15
    date: z.date(),
16
    // ... 其他字段
17
    desc: z.string().optional(),
18
    minutesRead: z.string().optional(),
19
    wordCount: z.number().optional(),
20
  }),
21
});

1
---
2
import { getCollection } from "astro:content";
3
import { convertMarkdownToText } from "@/utils/markdown";
4

5
const posts = await getCollection("posts");
6

7
// 为每篇文章计算描述、阅读时间和字数
8
const postsWithMeta = await Promise.all(
9
  posts.map(async (post) => {
10
    // ⚠️ 问题1：需要访问 post.body 获取原始内容
11
    const plainText = convertMarkdownToText(post.body || "");
12

13
    // ⚠️ 问题2：每次都要重新计算
14
    const wordCount = plainText.length;
15
    const minutesRead = Math.ceil(wordCount / 500) + " 分钟";
16
    const desc = plainText.slice(0, 125) + "...";
17

18
    return { ...post, wordCount, minutesRead, desc };
19
  })
20
);
21
---

1
import getReadingTime from "reading-time";
2
import { toString } from "mdast-util-to-string";
3

4
export function remarkPostBody() {
5
  return function (tree: unknown, { data }: { data: any }) {
6
    // 将 AST 转换为纯文本
7
    const textOnPage = toString(tree);
8

9
    // 计算阅读时间
10
    const readingTime = getReadingTime(textOnPage);
11

12
    // 直接将数据写入 frontmatter
13
    // 这些数据会被自动保存到文章元数据中
14
    data.astro.frontmatter.wordCount = textOnPage.length;
15
    data.astro.frontmatter.desc = textOnPage.slice(0, 125) + "...";
16
    data.astro.frontmatter.minutesRead = readingTime.text;
17
  };
18
}

1
import { remarkPostBody } from "./src/utils/remark-post-body.js";
2
import remarkToc from "remark-toc";
3
import remarkMath from "remark-math";
4

5
export default defineConfig({
6
  markdown: {
7
    // 确保 remarkPostBody 最先执行
8
    remarkPlugins: [remarkPostBody, [remarkToc, { heading: "toc", maxDepth: 7 }], remarkMath],
9
    rehypePlugins: [[rehypeKatex, { strict: false }], rehypePhotoswipe],
10
    smartypants: true,
11
    gfm: true,
12
  },
13
});

1
import { defineCollection } from "astro:content";
2
import { glob, file } from "astro/loaders";
3
import { z } from "astro/zod";
4

5
const posts = defineCollection({
6
  loader: glob({
7
    pattern: ["*.{md,mdx}"],
8
    base: "stalux/posts/",
9
    generateId: ({ data }) => String(data["abbrlink"]),
10
    // ✨ 关键配置：不保留原始 body
11
    retainBody: false,
12
  }),
13
  schema: z.object({
14
    title: z.string(),
15
    abbrlink: z.string().or(z.number().transform((num) => num.toString())),
16
    date: z.preprocess((v) => (typeof v === "string" ? new Date(v) : v), z.date()),
17
    updated: z.preprocess(
18
      (v) => (v == null ? undefined : typeof v === "string" ? new Date(v) : v),
19
      z.date().optional(),
20
    ),
21
    draft: z.boolean().optional().default(false),
22
    tags: z.preprocess(
23
      (val) => (typeof val === "string" ? [val] : val),
24
      z.array(z.string()).optional(),
25
    ),
26
    categories: z.preprocess(
27
      (val) => (typeof val === "string" ? [val] : val),
28
      z.array(z.string()).optional(),
29
    ),
30
    // ✨ 这些字段现在由 remark 插件自动填充
31
    desc: z.string().optional(),
32
    minutesRead: z.string().optional(),
33
    wordCount: z.number().optional(),
34
    cc: z.string().optional().default("CC-BY-NC-SA-4.0"),
35
  }),
36
});
37

38
// 关于页面同样优化
39
const about = defineCollection({
40
  loader: glob({
41
    base: "stalux/about",
42
    pattern: "**/*.{md,mdx}",
43
    retainBody: false,
44
  }),
45
  schema: z.object({
46
    title: z.string(),
47
    description: z.string(),
48
  }),
49
});
50

51
export const collections = { posts, about, config };

1
---
2
import { getCollection } from "astro:content";
3
// 直接获取，无需额外处理
4
const posts = await getCollection("posts");
5
// ✨ 无需再计算 wordCount、minutesRead、desc
6
// 这些数据已经从 frontmatter 中直接可用
7
---
8
<ul>
9
  {posts.map((post) => (
10
    <li>
11
      <h2>{post.data.title}</h2>
12
      <!-- 直接使用预计算的数据 -->
13
      <p class="desc">{post.data.desc}</p>
14
      <span class="meta">
15
        {post.data.wordCount} 字 · {post.data.minutesRead}
16
      </span>
17
    </li>
18
  ))}
19
</ul>

1
import { getCollection, render } from "astro:content";
2

3
/**
4
 * 获取所有文章的总字数
5
 * 注意：wordCount 是通过 remark 插件动态生成的虚拟 frontmatter，
6
 * 需要通过 render() 函数获取
7
 */
8
export async function getTotalWordCount(): Promise<number> {
9
  try {
10
    const posts = await getCollection("posts");
11
    let totalWords = 0;
12

13
    for (const post of posts) {
14
      // render() 会返回 remarkPluginFrontmatter
15
      const { remarkPluginFrontmatter } = await render(post);
16
      totalWords += remarkPluginFrontmatter.wordCount || 0;
17
    }
18

19
    return totalWords;
20
  } catch (error) {
21
    console.error("计算文章总字数时出错:", error);
22
    return 0;
23
  }
24
}
25

26
/**
27
 * 格式化字数显示
28
 */
29
export function formatWordCount(count: number): string {
30
  if (count >= 10000) {
31
    return `${(count / 10000).toFixed(1)}万`;
32
  } else if (count >= 1000) {
33
    return `${(count / 1000).toFixed(1)}k`;
34
  }
35
  return count.toString();
36
}

1
---
2
import { getTotalWordCount, formatWordCount } from "@/utils/word-count-utils";
3

4
const totalWords = await getTotalWordCount();
5
const formattedCount = formatWordCount(totalWords);
6
---
7

8
<footer>
9
  <p>本站累计 {formattedCount} 字</p>
10
</footer>