サイト開設時から使用していた「gatsby-remark-component」というプラグインがあるんですけど、この度このプラグインの使用をやめることにしました。

gatsby-remark-componentでできること

このプラグインを使うとmarkdownファイル内にコンポーネントを直接埋め込むことができるようになります。

例えば、僕は「linkcard」という名前で「はてぶカード」のような機能のコンポーネントを用意していました。 使用方法は次のような感じになります。

<linkcard to="/0004/"></linkcard>

この例だと0004という内部アドレスのリンクカードが自動で生成されるようになります。 WordPressのショートコードのように自動で展開される訳ですね。

使いようによってはかなり便利なプラグインです。

使用を辞めた2つの理由

htmlAstはprismjsが使えない

このプラグインでは通常のhtmlではなく、htmlAstというオブジェクトを利用するよう説明されています。 でも、残念なことにそれを利用するとprismjsが上手く適応してくれませんでした。

これについては仕様らしく、どうしようもなさそうです。

処理が遅くなる

htmlAstの解析にrehype-reactというライブラリを利用するようになっています。 でもReactの特性上、ブラウザでの処理が前提となるので、その処理に必要となる分だけ余計なjsの転送量が増えることになってしまいます。 そしてこれがLighthouseの結果にもろに出てしまいました。 わざわざGatsbyを使っているのに90点を超えるのも難しい具合です。

もちろんloadableのようなコード分割系のライブラリを使えばこの影響を無視させることもできるんですが、初回ロード時は該当jsの読み込みが遅延されるために、記事の内容が表示されるまで1〜2秒かかってしまうようになります。

説明されないとバグってるような動きに見えるんですね…。

LinkCard機能は諦めた！

このloadbleによる遅延は、当初は気になってはいたものの、数値的にはかなり軽快に動くということで「良し」としていました。 80点くらいから96点あたりまでスコアが上昇しますからね。

でも記事を追加してアップするたびに、初回ロードの遅延が生じることに気づきました。 どうも毎回該当jsが書き換えられるっぽくて、つまりはキャッシュが使えていない感じです。

記事を更新する度にあのバグってるような挙動が起きるんで、さすがにユーザー体験としてはマイナスなので、もう思い切ってLinkCard機能を捨ててしまうことにしました。 元の純粋なGatsbyへと戻す訳です。

rehypeを使うとGithub風に1文ごとに強制的に改行させることも可能だったんですが、今回はユーザー体験を重視しました。*1

Gatsbyってjsベースなので色々できそうな気がしてくるんですけど、転送量がネックなんだなと実感しました。

*1 もっと簡単な方法がありました。 【GatsbyJS】white-spaceのpre-wrap設定がとても便利ですにて紹介しています。