Gatsby Plugin Webpack Bundle Analyser v2

1.1.32 verified Sat Apr 25 auth: no javascript

A Gatsby plugin that integrates webpack-bundle-analyzer to visualize bundle output sizes with an interactive zoomable treemap. Current stable version is 1.1.32, updated irregularly. Supports Gatsby v4 and v5. Key differentiator: provides the latest webpack-bundle-analyzer version compared to original gatsby-plugin-webpack-bundle-analyser, and is ESM-compatible. Plugin is disabled in development by default; requires manual devMode option to enable during development.

Common errors

error Error: Cannot find module 'webpack-bundle-analyzer' ↓

cause Missing dependency of webpack-bundle-analyzer.

fix

Run npm install webpack-bundle-analyzer --save-dev

error Error: The plugin "gatsby-plugin-webpack-bundle-analyser-v2" is not a valid plugin. ↓

cause Plugin name misspelled or wrong format in gatsby-config.js.

fix

Use exact string: 'gatsby-plugin-webpack-bundle-analyser-v2'

Warnings

gotcha Plugin is disabled in development mode by default. Builds will not open analyzer unless devMode: true is set. ↓

fix Add options: { devMode: true } to plugin configuration in gatsby-config.js.

gotcha The plugin uses webpack-bundle-analyzer v4+, which may break if Gatsby's webpack version is incompatible. ↓

fix Ensure Gatsby version satisfies peer dependency (^4.0.0 || ^5.0.0). If issues arise, pin plugin version to 1.1.25.

deprecated gatsby-plugin-webpack-bundle-analyser-v2 may be less actively maintained; check for updates or consider alternatives like gatsby-plugin-webpack-bundle-analyzer. ↓

fix Use gatsby-plugin-webpack-bundle-analyzer if you need more active maintenance.

Install

npm install gatsby-plugin-webpack-bundle-analyser-v2

yarn add gatsby-plugin-webpack-bundle-analyser-v2

pnpm add gatsby-plugin-webpack-bundle-analyser-v2

Imports

Plugin Configuration

wrong

module.exports = { plugins: ['gatsby-plugin-webpack-bundle-analyser-v2'] }

correct

module.exports = { plugins: [{ resolve: 'gatsby-plugin-webpack-bundle-analyser-v2', options: { analyzerMode: 'server' } }] }

String shorthand works for defaults; object form needed for custom options.

Use in gatsby-config.js with options

wrong

const plugin = require('gatsby-plugin-webpack-bundle-analyser-v2'); module.exports = { plugins: [plugin] }

correct

module.exports = { plugins: [ { resolve: 'gatsby-plugin-webpack-bundle-analyser-v2', options: { devMode: true } } ] }

Plugin is configured via gatsby-config.js, not imported and instantiated directly.

Dev mode activation
wrong
```
options: { devMode: 'true' }
```
correct
```
options: { devMode: true }
```
devMode expects boolean, not string.

Quickstart

Configures the plugin with custom analyzer options and runs a build to open the bundle analysis in a browser.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
      options: {
        analyzerMode: 'server',
        analyzerPort: 3001,
        defaultSizes: 'gzip',
      },
    },
  ],
};

// Run build: gatsby build
// Browser opens automatically with bundle analysis.