ホームページ - EY-Office

2023-04-11

Astroはブログページ生成が遅いぞ ???

カテゴリー：EY-Office, React

先週のブログで書いたように、このブログを含むEY-OfficeホームページのAstro化がほぼ出来たのですが、なんとビルド時間が14分もかかりました。🥺

このブログを書くのにAstro版を使っていますが、最終レイアウトでプレビューしながらブログが書けるのは凄く快適です。
（まだAstro版は完成してないので、最終サイト構築はJekyll版で行いました。）

書き終わった後、サーバーにデプロイするのに時間がかかるのは本質的には問題がないのですが、やはり14分は遅いと思います。

Get discouraged by software that's too slow DeepAIが生成した画像です

なぜ遅いのか

ブログ以外のページ生成はとても早いですが、ブログが遅いのは下の画像のようにブログページの右側には注目記事 、最近の記事 、 カテゴリー 等の自動生成されるBlogSideBarパーツがあります。

今回の実装では、このBlogSideBarが全ブログ327ページに対して毎回生成されていました。しかしこのBlogSideBarは全ブログページで同じです。😅

ブログ用のastroファイルには ① のように BlogSideBarコンポーネントが呼び出しています。

<BlogLayout title="EY-Office ブログ" ogImage={ogImage} snsButton={true}>
  <main class="blog-page blog-particular">
    <div class="blog-p__article">
      <div class="article__header">
        <div class="article__date">{y}-{m}-{d}</div>
        <div class="article__title">{title}</div>

        ・・・ 省略 ・・・

      </div>
    </div>
    <BlogSideBar posts={posts}/>        <!-- ① -->
  </main>
</BlogLayout>

そこで、コンポーネントの処理結果をキャッシュする ② コードを追加してみました。

<BlogLayout title="EY-Office ブログ" ogImage={ogImage} snsButton={true}>
  <main class="blog-page blog-particular">
    <div class="blog-p__article">

        ・・・ 省略 ・・・

      </div>
    </div>
    {cache("BlogSidebar", () => <BlogSidebar posts={posts}/>)}    <!-- ② -->
  </main>
</BlogLayout>

cache関数の実体は以下のようになっています。

let cacheData:{[key: string]: any} = {};

export const cache = (key:string, component:() => any) => {
  if (!cacheData[key]) {
    cacheData[key] = component();
  }
  return cacheData[key];
}