https://github.com/lekoarts/gatsby-plugin-webpack-statoscope

Gatsby plugin for the statoscope HTML-report from webpack-stats (@statoscope/webpack-plugin)
https://github.com/lekoarts/gatsby-plugin-webpack-statoscope

analyzer gatsby gatsby-plugin statoscope webpack webpack-stats

Last synced: 10 days ago
JSON representation

Gatsby plugin for the statoscope HTML-report from webpack-stats (@statoscope/webpack-plugin)

• Host: GitHub
• URL: https://github.com/lekoarts/gatsby-plugin-webpack-statoscope
• Owner: LekoArts
• License: mit
• Created: 2023-01-18T12:30:24.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-03T12:16:25.000Z (over 1 year ago)
• Last Synced: 2024-12-16T22:00:48.829Z (about 1 month ago)
• Topics: analyzer, gatsby, gatsby-plugin, statoscope, webpack, webpack-stats
• Language: TypeScript
• Homepage:
• Size: 1.27 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: .github/README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# gatsby-plugin-webpack-statoscope

Gatsby plugin for the statoscope HTML-report from webpack-stats ([@statoscope/webpack-plugin](https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin)). The Statoscope webpack-plugin is developed by [Statoscope](https://statoscope.tech/). This plugin is an alternative to [gatsby-plugin-webpack-bundle-analyser-v2](https://www.gatsbyjs.com/plugins/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](https://www.smashingmagazine.com/2022/02/statoscope-course-intensive-therapy-bundle/) to learn more.



  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

      

    



## Install

```shell

npm install gatsby-plugin-webpack-statoscope

```

## How to use

Add the plugin to your `gatsby-config` file.

JavaScript:

```js:title=gatsby-config.js

module.exports = {

  plugins: [

    {

      resolve: `gatsby-plugin-webpack-statoscope`,

      options: {}

    }

  ]

}

```

TypeScript:

```ts:title=gatsby-config.ts

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](https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin) are passed through. Read its [usage section](https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin#usage) to learn more.

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