# gatsby-plugin-webpack-bundle-analyser-v2

> 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.

Latest version **1.1.32** (published 2023-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-webpack-bundle-analyser-v2
pnpm add gatsby-plugin-webpack-bundle-analyser-v2
yarn add gatsby-plugin-webpack-bundle-analyser-v2
bun add gatsby-plugin-webpack-bundle-analyser-v2
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.32 |
| Published | 2023-11-16 |
| First published | 2019-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 39 |
| Author | Jimmy Beldone |
| Maintainers | jimmybeldone |
| Keywords | gatsby, gatsby-plugin, gatsby-plugin-webpack-bundle-analyser-v2, webpack-bundle-analyser, webpack, analyser, bundle |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-webpack-bundle-analyser-v2
- Repository: https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2
- Issues: https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2/issues
- npm.io page: https://npm.io/package/gatsby-plugin-webpack-bundle-analyser-v2

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.23.2
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.10.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.32 (latest) — 2023-11-16
- 1.1.31 — 2023-05-03
- 1.1.30 — 2022-10-17
- 1.1.29 — 2022-10-17
- 1.1.27 — 2022-03-19
- 1.1.26 — 2021-11-11
- 1.1.25 — 2021-09-01
- 1.1.24 — 2021-06-23
- 1.1.23 — 2021-06-23
- 1.1.22 — 2021-04-13
- 1.1.21 — 2021-03-09
- 1.1.20 — 2021-01-24
- 1.1.19 — 2021-01-24
- 1.1.18 — 2020-12-08
- 1.1.17 — 2020-11-23
- … 29 more at https://npm.io/package/gatsby-plugin-webpack-bundle-analyser-v2/versions

## README

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

<p align="center">
    <a href="https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2">
        <img alt="travis build" src="https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2/workflows/TESTING/badge.svg">
    </a>
    <a href="https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2">
        <img alt="travis build" src="https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2/workflows/PUBLISH/badge.svg">
    </a>
    <a href="https://www.npmjs.com/package/gatsby-plugin-webpack-bundle-analyser-v2">
        <img alt="npm version" src="https://badgen.net/npm/v/gatsby-plugin-webpack-bundle-analyser-v2">
    </a>
    <a href="http://npm-stat.com/charts.html?package=gatsby-plugin-webpack-bundle-analyser-v2">
        <img src="https://img.shields.io/npm/dm/gatsby-plugin-webpack-bundle-analyser-v2.svg" alt="NPM downloads">
    </a>
    <a href="#badge">
        <img alt="dependencies status" src="https://badgen.net/david/dep/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2">
    </a>
    <a href="#badge">
        <img alt="dev dependencies status" src="https://badgen.net/david/dev/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2">
    </a>
</p>
<p align="center">
    <a href="http://commitizen.github.io/cz-cli/">
        <img alt="commitizen" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg">
    </a>
    <a href="https://github.com/semantic-release/semantic-release">
        <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
    </a>
    <a href="https://github.com/prettier/prettier">
        <img alt="prettier" src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg">
    </a>
    <a href="https://github.com/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2/blob/master/LICENSE">
        <img alt="license" src="https://badgen.net/github/license/JimmyBeldone/gatsby-plugin-webpack-bundle-analyser-v2">
    </a>
</p>


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

Copyright (c) 2019 Jimmy Beldone

---
_Source: https://npm.io/package/gatsby-plugin-webpack-bundle-analyser-v2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._