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

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 : {}

$3

You can add all available options of webpack-bundle-analyser 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 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

Copyright (c) 2019 Jimmy Beldone