Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

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.

travis build npm version NPM downloads dependencies status dev dependencies status

commitizen semantic-release prettier license

Install

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

or

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"
  ]
}

Options

This plugin is disable in dev mode by default, if you want to use it in dev mode, 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.

Contributing

Contributions are welcome ! See contributing guidelines

License

MIT

Copyright (c) 2019 Jimmy Beldone