EY-Office ブログ

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

先週のブログで書いたように、このブログを含む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];
}

このキャッシュを追加したコードのビルド時間は約3分18秒になりました ❗❗

これなら、我慢できるかな・・・

シンタックスハイライト用ライブラリーを変えてみた

Astroはシンタックスハイライト用ライブラリーにShikiPrismの2つをサポートしています。デフォルトはShikiですが、Prismの方が軽そうなので(感ですが)Prismに変えてみたところビルド時間は10秒くらい速いくなりました。😊

まとめ

キャッシュを導入する事でビルド時間は短くなりましたが、実はJekyllは約10秒でビルドできます。😅

Jekyllは基本機能として、最近の記事カテゴリ前後のブログリンクなどのブログ作成用機能を持っていますが、Astroにはそのような組み込み機能はなく、今回はブログ機能を自作しています。

自作したコードは非常に簡単なものですが、性能を下げる原因になっているのでしょうか?
もう少し分析してみようと思います。続く・・・

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ