no-yan
commented
3 years ago 前半部のコード分割についてPRを投げました#202。
コード分割のためにSuspenseを使っています。 SuspenseはReactの公式では実験的機能として紹介されおり、実際に使用するか検討しましたが、このドキュメントページの最終更新が2019と現在まで破壊的変更がなさそうで、next.jsが実装に使用していることから、当分問題なさそうと判断しています。 https://github.com/reactjs/reactjs.org/issues/2923
現在Shitforcesを表示するまで2.2秒かかっていました。JSファイルの読み込みが900msと全体の40%ぐらいなので、削減すればいくらか高速化できそうです。 3つのJSファイル(画像の上から3~5)に全てのページのスクリプトが纏まっているので、これをページごとに分割することで改善が可能です。
デプロイして実験してみなければわからないですが、
<script>タグにasyncやdefer属性をつけることで更に高速化できるかなと思います。 画像では2.ff22f693.chunk.jsのダウンロードが終わるまでフェッチが始まらないです。JSファイルがダウンロード終わったものから順に動くように変えればAPIを叩くタイミングが早くなるかをいずれ実験してみます（多分一番大きいファイルはreact-domなので、レンダー前のフェッチ自体は動くはず）。参考 https://tech.plaid.co.jp/frontend-performance-contest-in-plaid/ https://github.com/CyberAgentHack/web-speed-hackathon-online/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC