バンドルが大きいほどユーザーは長く待たされます
JavaScriptバンドルの初期読み込みへの影響は、単に「ダウンロード時間」だけでは説明できません。ブラウザはファイルをダウンロードした後もコードをパース(parsing)・コンパイル(compiling)する過程を経てから実行できますが、この過程も無視できない時間を占めます。特に中低価格帯のモバイル端末では、1MBのJavaScriptをパース・コンパイルするだけで1秒近くかかることも珍しくありません。
この計算機はバンドルサイズとネットワーク環境(3G、4G、Wi-Fi、5G)を入力して、ダウンロード時間とパース・コンパイル時間を合わせた予想First Load時間を計算します。同じバンドルでも3G環境では数秒かかっていた読み込みがWi-Fiでは瞬時に終わることが確認できますが、これは実際のユーザー層のネットワーク環境を考慮した最適化がなぜ重要かを示しています。
バンドルサイズを減らす最も効果的な方法は、コードスプリッティング(code splitting)で必要なページのコードだけを優先的に読み込み、ツリーシェイキング(tree shaking)で使用しないコードを除去することです。画像やフォントのような重いリソースは別途遅延読み込み(lazy loading)すれば初期バンドルサイズを大きく減らせます。
よくある質問
いいえ。ダウンロード後もパース・コンパイル時間が追加でかかるため、バンドルサイズ自体を減らすことがより根本的な解決策です。
現在のページに必要なコードだけを先に読み込み、初期読み込みに必要なバンドルサイズを減らす効果があります。
サービス対象の国やユーザー層によって、依然として遅いネットワーク環境の比重が高い場合があるため、最低限のパフォーマンス基準を確認するのが良いでしょう。