コード分割と遅延読み込み
dynamic importとルートベースの分割を使って、大きなJavaScriptバンドルをオンデマンドのチャンクに分割し、ユーザーが実際に必要とするコードだけをダウンロードするようにします。
「コード分割と遅延読み込み」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Performance Optimization & Lighthouse学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
The Monolithic Bundle Problem
Shipping all JavaScript in one bundle forces users to download code for pages they may never visit. Code splitting breaks the bundle into smaller chunks loaded only when needed.
Dynamic import()
The dynamic import() expression returns a promise and tells bundlers to create a separate chunk. The module loads on demand at runtime.
button.addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});Route-Based Splitting
The most impactful split is per route: each page becomes its own chunk, so the initial load contains only the landing route.
const Dashboard = React.lazy(() => import('./pages/Dashboard'));Suspense Fallbacks
While a lazy chunk loads, show a fallback so the UI stays responsive. In React this is Suspense; other frameworks have equivalents.
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>Component-Level Splitting
Heavy widgets like rich text editors, maps, or charts can be split too, loading only when the user opens that feature rather than on first paint.
Vendor Splitting
Separating third-party libraries into a vendor chunk lets it cache independently. App code changes frequently; vendor code rarely does, so users re-download less.
Prefetching Chunks
Lazy loading can add a delay when the user navigates. Prefetch the chunk during idle time, for example on link hover, so it is ready before the click.
link.addEventListener('mouseenter', () => import('./pages/Settings'));Avoiding Over-Splitting
Too many tiny chunks create request overhead and waterfalls. Aim for meaningful boundaries (routes, big features), not splitting every small function.
Tree Shaking Synergy
Code splitting pairs with tree shaking: use ES module imports and import only what you need so dead code never enters any chunk.
import { debounce } from 'lodash-es'; // only debounce is bundledMeasuring the Result
Use a bundle analyzer to inspect chunk sizes and the Coverage tab in DevTools to find unused code shipped on initial load. Lighthouse flags large unused JS.
Strategy Summary
- Split by route first.
- Lazy-load heavy components.
- Separate vendor chunks for caching.
- Prefetch likely-next chunks during idle.
Quick Check
Which JavaScript feature tells bundlers to create a separate chunk loaded on demand?
Recap
You learned to shrink initial payload with code splitting: dynamic import(), route- and component-level lazy loading, vendor chunking, idle prefetching, and tree shaking. Split at meaningful boundaries and measure with a bundle analyzer.
AI チューターと学ぶ Web Performance Optimization & Lighthouse — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「コード分割と遅延読み込み」レッスンは無料ですか？
はい。「コード分割と遅延読み込み」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
「コード分割と遅延読み込み」で何を学びますか？
dynamic importとルートベースの分割を使って、大きなJavaScriptバンドルをオンデマンドのチャンクに分割し、ユーザーが実際に必要とするコードだけをダウンロードするようにします。 ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Performance Optimization & Lighthouseを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Performance Optimization & Lighthouseは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「コード分割と遅延読み込み」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Performance Optimization & Lighthouseレッスンでコードを書いて実行できますか？
はい。すべてのWeb Performance Optimization & Lighthouseレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。