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


Webpack Bundle Analyzer

Plugin options


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

Other Options

analyzerHost: "",
devMode: true,
disable: true

as plugin:

  • is disabled in dev mode by default
  • should be disabled with disable: true for real production.