Gatsby plugin with the latest version of webpack-bundle-analyser to visualize size of output files with an interactive zoomable treemap.
npm i gatsby-plugin-webpack-bundle-analyser-v2 -D
or
yarn add gatsby-plugin-webpack-bundle-analyser-v2 -D
Include the plugin in your gatsby-config.js file :
/* gatsby-config.js */
module.exports = {
plugins: [
"gatsby-plugin-webpack-bundle-analyser-v2"
]
}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 : {}
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.
Contributions are welcome ! See contributing guidelines
MIT
Copyright (c) 2019 Jimmy Beldone
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent