バンドル は、ビルドツールがパッケージ化してブラウザに送るJavaScriptです。主に依存関係、重複したコード、そしてページがまだ必要としないコードの送信によって大きくなります。
何が膨張させるか
- 重いライブラリ — 日付やアイコンのライブラリ1つで数百KB増えることがあります。1つの関数のために
lodash全体をインポートすると、まるごと引き込みます。 - 使うものだけでなくすべてをインポートすること:
import _ from "lodash"; // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
バイト数は小さな問題で、パースと実行が大きな問題です。ブラウザはすべてのバイトをダウンロードし、それからメインスレッド上でパース、コンパイル、実行しなければなりません。そしてそれは、ノートPCよりも中級スマホの方がはるかに遅いのです。重いJSはインタラクティブになるのを遅らせ、INP と LCP を直接悪化させます。
「とりあえずライブラリを追加しよう」が、アプリが密かに遅くなっていく経緯です。面接官は、あなたがバンドルが膨れ上がる前に依存関係ごとのコストを考え、関数単位のインポート、tree shaking、コード分割に手を伸ばすことを見たいのです。特に、ユーザーのスマホは開発マシンよりはるかに非力なのですから。