バンドルサイズの分析
アプリケーションのJavaScriptバンドルサイズを分析・削減し、初回ページ読み込みを高速化してパフォーマンスを向上させます。
「バンドルサイズの分析」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What is a JavaScript Bundle?
When you build a Next.js application for production, all your JavaScript code – your components, libraries, and Next.js itself – gets combined and optimized into one or more files called "bundles".
These bundles are what the user's browser downloads to run your application.
Impact on Performance
The larger your JavaScript bundles are, the longer it takes for a user's browser to download, parse, and execute them.
- Slower Load Times: Users wait longer for your app to become interactive.
- Higher Data Usage: Especially important for mobile users on limited data plans.
- Worse User Experience: Can lead to frustration and users abandoning your site.
Analyzing Your Build Output
Next.js provides useful information when you run next build. It shows the size of each page's JavaScript bundle.
However, for a deeper look into what's inside those bundles, you need specialized tools.
next buildVisualizing Bundles with Analyzer
The @next/bundle-analyzer package is a powerful tool. It creates an interactive treemap visualization of your bundles.
This visual map helps you quickly identify large modules or third-party libraries that contribute significantly to your bundle size.
Configuring the Analyzer
First, install the package:
npm install --save-dev @next/bundle-analyzer
Then, update your next.config.js to enable it conditionally:
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
openAnalyzer: false,
});
module.exports = withBundleAnalyzer({});Generating the Bundle Report
To generate the report, you need to set the ANALYZE environment variable and then run your Next.js build command.
This will create HTML files in your .next/analyze folder that you can open in your browser.
ANALYZE=true npm run buildWhat Makes Bundles Large?
Several factors can lead to an oversized bundle:
- Large Libraries: Importing an entire library when you only use a small part.
- Duplicate Code: Different parts of your app importing the same module.
- Unused Code: Code that's included but never executed (dead code).
- Heavy Assets: Inline SVG or base64 images directly in JS files.
Splitting Code for Efficiency
Code splitting is a technique that breaks your code into smaller "chunks" that can be loaded on demand. Next.js does this automatically for pages.
For components within a page, you can use dynamic imports to load them only when needed, reducing the initial bundle size.
Lazily Loading Components
Use next/dynamic to import components only when they are rendered. This is perfect for components that aren't critical for the initial page load, like modals or admin panels.
import dynamic from 'next/dynamic';
const LazyComponent = dynamic(() => import('../components/HeavyComponent'), {
loading: () => <p>Loading...</p>,
});
function MyPage() {
return (
<div>
<h1>My Page</h1>
<LazyComponent />
</div>
);
}Quick Check: Bundle Optimization
Consider a Next.js application that has grown significantly. Which of the following strategies are effective for reducing the initial JavaScript bundle size?
Summary of Bundle Optimization
Great job! You've learned how to analyze your Next.js application's JavaScript bundle size and implement key optimization techniques.
- Use
@next/bundle-analyzerto visualize your bundles. - Implement dynamic imports for non-critical components.
- Be mindful of large third-party libraries and ensure tree-shaking is effective.
Optimizing bundle size is crucial for delivering a fast and responsive user experience.
よくある質問
「バンドルサイズの分析」レッスンは無料ですか？
はい。「バンドルサイズの分析」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
「バンドルサイズの分析」で何を学びますか？
アプリケーションのJavaScriptバンドルサイズを分析・削減し、初回ページ読み込みを高速化してパフォーマンスを向上させます。 ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「バンドルサイズの分析」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？
はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。