先週のブログで書いたように、このブログを含むEY-OfficeホームページのAstro化がほぼ出来たのですが、なんとビルド時間が14分もかかりました。🥺
このブログを書くのにAstro版を使っていますが、最終レイアウトでプレビューしながらブログが書けるのは凄く快適です。
(まだAstro版は完成してないので、最終サイト構築はJekyll版で行いました。)
書き終わった後、サーバーにデプロイするのに時間がかかるのは本質的には問題がないのですが、やはり14分は遅いと思います。
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はシンタックスハイライト用ライブラリーにShikiとPrismの2つをサポートしています。デフォルトはShikiですが、Prismの方が軽そうなので(感ですが)Prismに変えてみたところビルド時間は10秒くらい速いくなりました。😊
まとめ
キャッシュを導入する事でビルド時間は短くなりましたが、実はJekyllは約10秒でビルドできます。😅
Jekyllは基本機能として、最近の記事やカテゴリ、前後のブログリンクなどのブログ作成用機能を持っていますが、Astroにはそのような組み込み機能はなく、今回はブログ機能を自作しています。
自作したコードは非常に簡単なものですが、性能を下げる原因になっているのでしょうか?
もう少し分析してみようと思います。続く・・・