JimmyBeldonegatsby-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 :
/* 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
Copyright (c) 2019 Jimmy Beldone