building/bundle-analysis

21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Server Component syntax highlighting example

Optimized pattern: move highlighting to a Server Component using a library like Shiki. The package runs on the server and is never bundled for the client. The client only receives the rendered markup (HTML string passed via dangerouslySetInnerHTML).

transpilePackages configuration option (Pages Router)

In the Pages Router, use the transpilePackages option in next.config.js to bundle specific packages that are not pre-bundled by default. Example: transpilePackages: ['package-name'].

bundlePagesRouterDependencies configuration option

In the Pages Router, use the bundlePagesRouterDependencies option in next.config.js to automatically bundle all external packages. This option defaults to false. Example: bundlePagesRouterDependencies: true.

Client Component syntax highlighting example

Example of heavy client workload: using prism-react-renderer in a Client Component to highlight code. The entire Prism package and tokenization logic are shipped to the client JavaScript bundle even though the output is just static HTML markup.

Bundling definition and benefits

Bundling is the process of combining application code and dependencies into optimized output files for the client and server. Smaller bundles load faster, reduce JavaScript execution time, improve Core Web Vitals, and lower server cold start times.

Next.js automatic bundle optimization techniques

Next.js automatically optimizes bundles by using code splitting, tree-shaking, and other techniques. However, there are cases where manual bundle optimization may be needed.

Bundle analyzer tools available in Next.js

There are two tools for analyzing application bundles: Next.js Bundle Analyzer for Turbopack (experimental, available in v16.1 and later) and @next/bundle-analyzer plugin for Webpack.

Turbopack Bundle Analyzer command

To run the Turbopack Bundle Analyzer, execute 'npx next experimental-analyze' (npm), 'yarn next experimental-analyze' (yarn), 'pnpm next experimental-analyze' (pnpm), or 'bunx next experimental-analyze' (bun). This opens an interactive view in the browser.

Turbopack Bundle Analyzer output flag

Use the --output flag with 'npx next experimental-analyze --output' to skip the interactive view and save the analysis as a static file. The output is written to .next/diagnostics/analyze, which can be copied elsewhere to compare results before and after optimizations.

Turbopack Bundle Analyzer UI filtering

Within the Turbopack Bundle Analyzer UI, you can filter by route, environment (client or server), and type (JavaScript, CSS, JSON), or search by file.

Turbopack Bundle Analyzer treemap and module inspection

The treemap shows each module as a rectangle where the size is represented by the area. Clicking a module displays its size, full import chain, and shows exactly where it is used in the application.

@next/bundle-analyzer plugin installation

Install @next/bundle-analyzer using: 'pnpm add @next/bundle-analyzer' (pnpm), 'npm install @next/bundle-analyzer' (npm), 'yarn add @next/bundle-analyzer' (yarn), or 'bun add @next/bundle-analyzer' (bun).

@next/bundle-analyzer configuration in next.config.js

Add @next/bundle-analyzer to next.config.js by importing it with withBundleAnalyzer and wrapping the nextConfig object. Set enabled to process.env.ANALYZE === 'true' to control when the analyzer runs: const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }); module.exports = withBundleAnalyzer(nextConfig);

@next/bundle-analyzer report generation

Run 'ANALYZE=true npm run build', 'ANALYZE=true yarn build', or 'ANALYZE=true pnpm build' to analyze bundles. The report will open three new tabs in the browser for inspection.

@next/bundle-analyzer purpose

@next/bundle-analyzer is a plugin that helps manage application bundle size by generating a visual report showing the size of each package and their dependencies. It provides information to remove large dependencies, split code, or lazy-load code.

optimizePackageImports configuration option

Use the optimizePackageImports option in next.config.js to optimize packages with many exports (such as icon and utility libraries). This loads only the modules actually used while preserving convenience of named imports. Example: experimental: { optimizePackageImports: ['icon-library'] }. Next.js automatically optimizes some popular libraries.

Heavy client workload optimization pattern

Heavy client workloads that increase bundle size often come from libraries that transform data into UI (syntax highlighting, chart rendering, markdown parsing). If the work does not require browser APIs or user interaction, it should be moved to a Server Component where it runs on the server and is never bundled for the client.

serverExternalPackages configuration option

Use the serverExternalPackages option in next.config.js to opt specific packages out of bundling. Packages imported inside Server Components and Route Handlers are automatically bundled by Next.js, but can be excluded with this option. Example: serverExternalPackages: ['package-name'].

Reduce client-side JavaScript bundle with 'use client' boundaries

The placement of 'use client' boundaries should be checked to avoid unnecessarily increasing client-side JavaScript bundle size.

Automatic code-splitting by route segments

Server Components enable automatic code-splitting by route segments in Next.js. Client Components and third-party libraries can also be lazily loaded where appropriate.

Use @next/bundle-analyzer to analyze JavaScript bundles

The @next/bundle-analyzer plugin should be used to analyze the size of JavaScript bundles and identify large modules and dependencies that might impact application performance.

Give your agent this brain