バンドルサイズが大きいと言える基準について知りたいです

Question

Reactで開発しているプロジェクトのバンドルサイズについて質問です。
パフォーマンス改善を考える中で「バンドルサイズが大きいと良くない」とよく聞くのですが、
そもそも 「どのくらいのサイズから大きいと判断されるのか」 がよくわかっていません。

調べてみたところ、100KB以内が良いとか、初回ロードが500KB以内に収まるのが理想という情報も見かけましたが、
ソースによって言っていることがバラバラで、どれを参考にすればよいのか迷っています。

質問したいこと
Reactのバンドルサイズは何KB以上から「大きい」とされるのでしょうか？

一般的なWebアプリやSPA（シングルページアプリケーション）では、どのくらいのサイズが目安になりますか？

バンドルサイズがパフォーマンスに与える具体的な影響と、ユーザー体験への影響はどの程度でしょうか？

実際にプロの方は、どれくらいのサイズを目標に最適化しているかも知りたいです

もし参考になる基準や経験などあれば、教えていただけると嬉しいです！
よろしくお願いいたします。

Comments

[kikukiku]

「パフォーマンス改善を考える」ということですので
まず現在は表示にどの程度時間がかかっており、
どの程度まで改善したいのでしょうか？
そのかかっている時間を、ダウンロード時間、処理時間（どの部分の処理）が
どのくらいの時間がかかっているかを計測していますでしょうか？
ダウンロード時間が９割をしめているのであるならば、
このバンドルサイズを半分にすれば、約半分の改善が見込めますし、
実は処理時間が9割をしめているのであるならば、
バンドルサイズを少なくしても効果が少ないと言えます。
まずは、現在の分析と、目標を設定することをお勧めします。

Answer 1

バンドルサイズがパフォーマンスに与える具体的な影響と、ユーザー体験への影響はどの程度でしょうか？

どのようなWebサイト・ページなのかにも、大きく依存します。

記事コンテンツやランディングページなど、一見さんの流入を見込むのが前提のページはファーストビューの速さを重視すべきですし、逆にログインしないと見られないようなページでは、最初にアセット類をキャッシュすればUX上の問題もほとんど発生しない、ということもありえます。