0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Урок

Анализ размера сборки

Проанализируйте и уменьшите размер сборки JavaScript вашего приложения, чтобы ускорить первоначальную загрузку страниц и повысить производительность.

«Анализ размера сборки» — бесплатный урок Next.js 15 Fullstack (App Router + Server Actions) на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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 build

Visualizing 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 build

What 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-analyzer to 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/7) и разблокировать остальной курс 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/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Next.js 15 Fullstack (App Router + Server Actions)?

Предыдущий опыт не требуется. Next.js 15 Fullstack (App Router + Server Actions) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Анализ размера сборки»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Next.js 15 Fullstack (App Router + Server Actions)?

Да. Каждый урок Next.js 15 Fullstack (App Router + Server Actions) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Оптимизация изображений и шрифтов
  2. Анализ размера сборки
  3. Продвинутые стратегии кэширования
  4. Потоковая передача интерфейса с Suspense и состояниями загрузки
← Назад к Next.js 15 Fullstack (App Router + Server Actions)