0Pricing
Frontend Academy · レッスン

バンドルの概念：tree shaking・コード分割

バンドラーが tree shaking で未使用のエクスポートを削除し、初回ページ読み込みを高速化するため出力をチャンクに分割する仕組みを理解します。

「バンドルの概念：tree shaking・コード分割」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

バンドラーの役割

バンドラー（Vite、webpack、Rollup、Parcel）は、ソースファイルを読み込み、インポートを解決し、コードを変換（トランスパイル、圧縮、最適化）して、ブラウザーが効率よく読み込めるファイルを出力します。

モジュールグラフ

バンドラーは エントリーポイントから開始し、すべてのインポートをたどってモジュールグラフを構築します。これは、アプリが使用するすべてのコードを完全に表したものです。このグラフが、すべての最適化の基盤になります。

ツリーシェイキング — デッドコードの除去

ツリーシェイキングはモジュールグラフを分析し、一度もインポートされていないエクスポートを削除します。ツリーシェイキングを有効にできるのは ES モジュールの静的インポートだけです。CommonJS の require() は動的であるため、静的に分析できません。

// utils.js
export const add = (a, b) => a + b;       // used → included
export const multiply = (a, b) => a * b;  // never imported → removed

// app.js
import { add } from './utils.js';
console.log(add(2, 3));

副作用と sideEffects: false

ライブラリに副作用がない場合（純粋な再エクスポートのみの場合）は、package.json に "sideEffects": false を追加します。これにより、バンドラーはパッケージ内のインポートされていないファイルを安全に削除できます。

// package.json of a library:
{
  "sideEffects": false
  // or list files with side effects:
  "sideEffects": ["./src/polyfills.js"]
}

コード分割

コード分割では、バンドルを必要なときに読み込む複数のチャンクに分割します。メインチャンクを小さく保つことで、初回読み込みを高速にできます。追加のチャンクは、必要になったとき（遅延ルートや機能切り替えなど）にだけ読み込まれます。

エントリーポイントの分割

マルチページアプリには複数のエントリーポイントがあり、それぞれが独自のバンドルを生成します。React などの共有コードは、自動的に共有チャンクへ抽出されます。

動的インポートの分割

動的な import() 呼び出しはすべて分割ポイントになります。バンドラーは、遅延読み込みされるモジュールと、そのモジュール固有の依存関係を別のチャンクとして生成します。

// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));

ベンダーチャンク

node_modules のコードはほとんど変更されません。これを有効期間の長いキャッシュを設定したベンダーチャンクに抽出します。ベンダーチャンクをキャッシュしているユーザーは、更新時にアプリのチャンクだけを再ダウンロードすれば済みます。

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['react', 'react-dom'] }
    }
  }
}

圧縮

圧縮ツール（esbuild、terser）は、空白を削除し、変数名を1文字に変更するなど、さまざまな削減を行います。一般的な React アプリは、圧縮後に60〜70%小さくなります。

コンテンツベースのハッシュ化

バンドラーは、ファイルの内容のハッシュをファイル名に追加します：index-a1b2c3.js。内容が変わるとハッシュが変わり、ファイル名も変わるため、ブラウザーは新しいファイルを取得します。変更されていないチャンクは無期限にキャッシュされます。

ソースマップ

ソースマップは、圧縮された出力を元のソースコードに対応付けます。ソースマップは別途生成され（ユーザーには送信されません）、デバッグ時に DevTools が使用します。build.sourcemap: true で有効にできます。

確認問題

ツリーシェイキングを機能させるための主な要件は何ですか？

まとめ：バンドルの概念

バンドラーはモジュールグラフを解決し、未使用のエクスポートをツリーシェイキングで削除します（静的な ESM が必要です）。また、遅延読み込みのためにコードをチャンクへ分割し、キャッシュのためにベンダーコードを抽出し、出力を圧縮して、キャッシュ無効化用にコンテンツハッシュを追加します。ソースマップを使うと、圧縮されたコードをデバッグできます。

よくある質問

「バンドルの概念：tree shaking・コード分割」レッスンは無料ですか？

はい。「バンドルの概念：tree shaking・コード分割」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「バンドルの概念：tree shaking・コード分割」で何を学びますか？

バンドラーが tree shaking で未使用のエクスポートを削除し、初回ページ読み込みを高速化するため出力をチャンクに分割する仕組みを理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「バンドルの概念：tree shaking・コード分割」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ES モジュール：import・export・dynamic import
  2. npm と package.json：dependencies・scripts
  3. Vite：開発サーバーとビルド
  4. バンドルの概念：tree shaking・コード分割
← Frontend Academyに戻る