gatsby-plugin-webpack-bundle-analyser-v2

KO | EN

gitlite — search

#python #react #ai #llm #golang #machine-learning #rust #deep-learning #docker #windows #kubernetes #pytorch #security #open-source

gatsby-plugin-webpack-bundle-analyser-v2

(★ 39)

Gatsby plugin with the latest version of webpack-bundle-analyser (https://github.com/webpack-contrib/webpack-bundle-analyzer) to visualize size of output files with an interactive zoomable treemap.

gatsby-plugin-webpack-bundle-analyser-v2 Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center" style="border-bottom: none;">gatsby-plugin-webpack-bundle-analyser-v2</h1>
<h3 align="center">Gatsby plugin with the latest version of <a href="https://github.com/webpack-contrib/webpack-bundle-analyzer">webpack-bundle-analyser</a> to visualize size of output files with an interactive zoomable treemap.</h3>

## 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 :

```javascript
/* 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:

```javascript
// 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](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) of [webpack-bundle-analyser](https://github.com/webpack-contrib/webpack-bundle-analyzer) original plugin like this :

```javascript
// 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 :

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

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

**Note for [Gatsby Cloud](https://www.gatsbyjs.com/cloud/) users** :

Default options for [Gatsby Cloud](https://www.gatsbyjs.com/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](https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2/blob/master/CONTRIBUTING.md)

## License

MIT

gatsby-plugin-webpack-bundle-analyser-v2

gatsby-plugin-webpack-bundle-analyser-v2 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

gatsby-plugin-webpack-bundle-analyser-v2

gatsby-plugin-webpack-bundle-analyser-v2 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README