EY-Office ブログ

昨日Astroはブログページ生成が遅いぞ ???というブログを書きましたが、その後コードを見直したところ遅い原因に気が付きました。

そして修正したところ、たった11秒でビルドできるようになりました。❗❗

DeepAIが生成した画像です

ビルドが遅かった原因

このブログには記事一覧という下の画像のようなページがあります。ここには全ブログの画像、タイトル、本文テキストの一部などが並んでいます、ブログ数は300以上あるとはいえ、このページのビルドに1分近くかかるのは納得がいかないので、コードにたくさんのconsole.log("XXXX", new Date());を入れ処理時間を計測したところ驚愕の事実がわかりました。

以下のblogInfo関数は記事一覧やブログページに表示するブログ記事の情報を戻す関数です。

• ① compiledContent()メソッドのでMarkdownで書かれたブログ記事をHTMLに変換された結果を取得しています
• ② HTMLから最初に現れた画像のURLを取得しています
• ③ HTMLからHTMLタグを取り除き本文テキストを取り出しています

export const blogInfo = (post: MarkdownInstance<Record<string, any>>) => {
  const p = blogParms(post);
  const html = post.compiledContent();                              // ← ①
  const firstImageMatch = html.match(/<img\s+src="(.*?)"/);         // ← ②
  const summaryRaw = stripHtml(html).result.replace(/[\r\n]/g, ""). // ← ③
    replace(/写真は.*?から/, '');
  const ogImage = firstImageMatch ? firstImageMatch[1] : "/images/logo.png";
  const categories: string[] = post.frontmatter.categories.split(" ");
  const title: string = post.frontmatter.title;

  return {
    date: `${p.y}-${p.m}-${p.d}`,
    titleShort: title.length > 19 ? title.slice(0, 19) + "…" : title,
    category: categories.join(", "),
    path: blogUrl(post),
    summary: (limit:number) => summaryRaw.slice(0, limit) + "…",
    html,
    title,
    ogImage,
    categories
  };
}

問題は、①のcompiledContent()メソッドにありました！ この中で行われるMarkdownからHTMLへの変換はかなり重い処理だったのです。

画像URLや本文テキストはMarkdownからも取得できます。そこで以下のように変更しました。

• ① rawContent()メソッドのでMarkdownの文字列を取得しています
• ② markdown-to-txtのremoveMarkdown関数でMarkdownのタグを取り除き、本文テキストを取り出しています
• ③ Markdown文字列の中から最初に現れた画像のURLを取得しています
• ④ 本文テキストから改行、不要文字列を削除しています

export const blogInfo = (post: MarkdownInstance<Record<string, any>>) => {
  const p = blogParms(post);
  const markdown = post.rawContent();                               // ← ①
  const text = removeMarkdown(markdown);                            // ← ②
  const firstImageMatch = markdown.match(/!\[.*?\]\((.*?)[ )]/);    // ← ③
  const summaryRaw = text.replace(/[\r\n]/g, "").                   // ← ④
    replace(/写真は.*?から/, '');
  const ogImage = firstImageMatch ? firstImageMatch[1] : "/images/logo.png";
  const categories: string[] = post.frontmatter.categories.split(" ");
  const title: string = post.frontmatter.title;

  return {
    date: `${p.y}-${p.m}-${p.d}`,
    titleShort: title.length > 19 ? title.slice(0, 19) + "…" : title,
    category: categories.join(", "),
    path: blogUrl(post),
    summary: (limit:number) => summaryRaw.slice(0, limit) + "…",
    title,
    ogImage,
    categories
  };
}

以上の変更で、ビルド時間が3分6秒から11秒に短縮しされました。
なんと17倍の高速化 ❗❗