gatsby-plugin-webpack-statoscope

Gatsby plugin for the statoscope HTML-report from webpack-stats (@statoscope/webpack-plugin). The Statoscope webpack-plugin is developed by Statoscope. This plugin is an alternative to gatsby-plugin-webpack-bundle-analyser-v2 which also allows you to visualize the size of output files with an interactive zoomable treemap.

Consider reading Statoscope: A Course Of Intensive Therapy For Your Bundle to learn more.

Install

npm install gatsby-plugin-webpack-statoscope

How to use

Add the plugin to your gatsby-config file.

JavaScript:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-webpack-statoscope`,
      options: {}
    }
  ]
}

TypeScript:

import type { GatsbyConfig, PluginRef } from "gatsby"
import type { PluginOptions as StatoscopePluginOptions } from "gatsby-plugin-webpack-statoscope"

const config: GatsbyConfig = {
  plugins: [
    {
      resolve: `gatsby-plugin-webpack-statoscope`,
      options: {} as StatoscopePluginOptions,
    },
  ] as PluginRef[],
}

export default config

Now run gatsby build. A browser window will automatically open with the Statoscope UI. The output will be placed into the public/.statoscope folder.

When enabling the watchMode option you can also use this plugin with gatsby develop.

Plugin Options

All options for @statoscope/webpack-plugin are passed through. Read its usage section to learn more.

By setting the saveReportTo and saveStatsTo options you can overwrite the default public/.statoscope location.