@next/bundle-analyzer

What is @next/bundle-analyzer?

The @next/bundle-analyzer package is a tool designed for Next.js applications that allows developers to visualize the size of webpack output files with an interactive zoomable treemap. It helps in identifying which components or libraries are contributing most to the bundle size, making it easier to optimize the application's performance by reducing unnecessary code.

What are @next/bundle-analyzer's main functionalities?

Analyzing the bundle size

This code snippet demonstrates how to integrate @next/bundle-analyzer into a Next.js project. By wrapping the Next.js configuration with the withBundleAnalyzer function and setting the 'enabled' option based on an environment variable, developers can conditionally run the bundle analysis. When ANALYZE is set to 'true', the bundle analyzer will generate a report showing the size of the webpack output files.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});
module.exports = withBundleAnalyzer({});

Other packages similar to @next/bundle-analyzer

webpack-bundle-analyzer

Similar to @next/bundle-analyzer, webpack-bundle-analyzer is a tool that provides a detailed visualization of the contents of webpack bundles. It works with any webpack configuration, making it more versatile than @next/bundle-analyzer, which is specifically tailored for Next.js projects. Both tools use interactive treemaps for visualizing bundle sizes, but webpack-bundle-analyzer can be used in a wider range of projects.

source-map-explorer

Source-map-explorer analyzes JavaScript bundles using the source maps. This allows developers to understand where code bloat is coming from. Unlike @next/bundle-analyzer, which is designed for Next.js applications, source-map-explorer can be used with any JavaScript project that generates source maps. It provides a different visualization approach, using a treemap or a sunburst chart, but serves a similar purpose of helping to optimize bundle size.

README

Next.js + Webpack Bundle Analyzer

Use webpack-bundle-analyzer in your Next.js project

Installation

npm install @next/bundle-analyzer

or

yarn add @next/bundle-analyzer

Note: if installing as a devDependency make sure to wrap the require in a process.env check as next.config.js is loaded during next start as well.

Usage with environment variables

Create a next.config.js (and make sure you have next-bundle-analyzer set up)

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})

Or configuration as a function:

module.exports = (phase, defaultConfig) => {
  return withBundleAnalyzer(defaultConfig)
}

Then you can run the command below:

# Analyze is done on build when env var is set
ANALYZE=true yarn build

When enabled two HTML files (client.html and server.html) will be outputted to <distDir>/analyze/. One will be for the server bundle, one for the browser bundle.

Options

To disable automatically opening the report in your default browser, set openAnalyzer to false:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
  openAnalyzer: false,
})
module.exports = withBundleAnalyzer({})

Usage with next-compose-plugins

From version 2.0.0 of next-compose-plugins you need to call bundle-analyzer in this way to work

const withPlugins = require('next-compose-plugins')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withPlugins([
  [withBundleAnalyzer],
  // your other plugins here
])