@next/bundle-analyzer

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 three HTML files (client.html, edge.html and nodejs.html) will be outputted to <distDir>/analyze/. One will be for the nodejs server bundle, one for the edge server bundle, and 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
])

Similar packages

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.