Community Plugin

gatsby-plugin-webpack-bundle-analyser-v2

Gatsby plugin with the latest version of webpack-bundle-analyser to visualize size of output files with an interactive zoomable treemap.

Install

npm i gatsby-plugin-webpack-bundle-analyser-v2 -D

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

Usage

Include the plugin in your gatsby-config.js file :

/* gatsby-config.js */

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

Then run a build as normal and the plugin will automatically open a browser window with the bundle analysis.

Options

This plugin is disabled in development environment (when process.env.NODE_ENV is development) by default.
If you want to use it in development environment, set devMode: true like this:

// in gatsby-config.js

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

Optionally you can disable the analyser, just add disable: true in options : {}

Original plugin options

You can add all available options of webpack-bundle-analyser original plugin like this :

// in gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
      options: {
        analyzerMode: "server",
        analyzerPort: "8888",
        analyzerHost: "http://myhost.com",
        defaultSizes: "gzip"
      },
    },
  ],
}

In this plugin, the default original options are :

{
  analyzerMode: 'server',
  analyzerPort: 3001,
}

which run a server on http://127.0.0.1:3001 with your bundle report.

Note for Gatsby Cloud users :

Default options for Gatsby Cloud users change a bit, analyzerMode is set to static, and a report.html will be generated in /public folder.

Contributing

Contributions are welcome ! See contributing guidelines

License

MIT