Gatsby Webpack Bundle Analyzer

Using Webpack Bundle Analyzer

Gatsby Webpack Bundle Analyzer

by John Vincent


Posted on September 24, 2019


This stuff ends up sprayed everywhere, so let's create a reference document.

Gatsby Webpack Bundle Analyzer

gatsby-plugin-webpack-bundle-analyser-v2

Webpack Bundle Analyzer

Plugin options

Install

npm i --save-dev gatsby-plugin-webpack-bundle-analyser-v2

Using the plugin gatsby-plugin-webpack-bundle-analyser-v2, add to gatsby-config.js

{
	resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
	options: {
		analyzerMode: `server`,
		analyzerPort: `8888`,
	},
},

Run the production build

npm run build

View the report

http://127.0.0.1:8888/

Other Options

analyzerHost: "http://myhost.com",
devMode: true,
disable: true

as plugin:

  • is disabled in dev mode by default
  • should be disabled with disable: true for real production.
Gatsby and Client Only ComponentsGatsby React Icons