フロントエンド– category –

ブログの画像289ファイル75.69MBをWebPに移行して6.61MB（91.3%減）にした記録。同じ画像をPNG/JPEG/WebP/AVIFで実測した比較と、1枚だけJPEGが残ったせいでXのリンクカードが壊れた事故の顛末をまとめます。

ReactのErrorBoundaryが実際にどこまで捕捉するか、5通りの壊し方で検証しました。捕まえたのは2つだけで、実務でよく起きる3つは素通りします。取りこぼしを拾う設計までまとめます。

React 18で子コンポーネント500個を並べて再レンダリング回数を実測しました。memoを貼っただけでは5,000回のまま変わらず、useCallbackで参照を固定して初めて0回になりました。

TypeScriptの型注釈は外から来るデータを検証しません。tscが止めてくれるコードと素通りするコードの境界を実際にコンパイル・実行して確かめ、境界での検証設計までまとめます。

ブログの画像を全部WebPにしても、モバイルのLighthouseは55点のままでした。転送量を分解したら画像は全体の1.2%で、58%が日本語Webフォント。実際に止めて測り直した記録です。