コード分割とtree shakingとは何ですか？

Question

IT Interview Practice · Accepted Answer

どちらもユーザーがダウンロードするJavaScriptを削減します。**コード分割（code splitting）** はバンドルを必要に応じて読み込まれるチャンクに分けます。**tree shaking** は決して使わないコードを取り除きます。両者は補完的です。*何を*読み込むかを分割し、各チャンク内の*デッド*コードを振り落とします。

## コード分割

1つの大きなバンドルの代わりに、各ルートや重い機能が別々のチャンクとなり、必要なときにだけ取得されるようアプリを分割します:

```js
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk

// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetched on click
  openEditor();
};
```

動的な `import()` が合図です。バンドラはその境界で別ファイルを出力します。

## Tree shaking

バンドラはESモジュールの `import`/`export` を静的に解析し、何も参照していないexportを削除します。これは**ESM**（静的で解析可能）でのみ機能し、CommonJSの `require` では機能しません:

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

これは `package.json` の `"sideEffects": false` と関数単位のインポートに依存します。バレルファイルや副作用のあるモジュールはこれを妨げることがあります。

## トレードオフ

- 分割しすぎ → 多数の小さなリクエストとウォーターフォール。関連するコードはまとめましょう。
- Tree shakingは脆いものです。副作用の指定を誤ると、デッドコードが残ります。

## なぜ重要なのか

これらは「JSをより少なく送る」ための2つのレバーです。面接官は、あなたがコード分割は*何をいつ読み込むか*を決め、tree shakingは*そもそも中に何が入っているか*を決めること、そしてtree shakingが静的なESMに依存することを知っているかを見たいのです。それは、実際にバンドルを調整したことがある人と、それについて読んだだけの人を分ける詳細なのです。

コード分割

Tree shaking

トレードオフ

なぜ重要なのか

関連する質問