Demos: Bundle analysis comparison · Bundle analysis

BundleStats Gatsby plugin

- Bundle size and totals by file type(css, js, img, etc)
- Insights: duplicate packages, new packages
- Initial JS/CSS, Cache invalidation, and other bundle metrics
- Assets report (entrypoint, initial, types, changed, delta)
- Modules report (changed, delta, chunks, duplicate count and percentage)
- Packages report (count, duplicate, changed, delta)
Side by side comparison for multiple builds

Description

Analyze Gatsby bundle stats(bundle size, assets, modules, packages) and compare the results between different builds.

How to install

npm install --dev gatsby-plugin-bundle-stats

or

yarn add --dev gatsby-plugin-bundle-stats

Available options

See bundle-stats-webpack-plugin options.

Examples of usage

// In your gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-bundle-stats'
  ]
};

or with custom options

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-bundle-stats',
      options: {
        compare: true,
        outDir: '../artifacts',
        stats: {
          context: './src'
        }
      }
    },
  ]
};

Other packages

bundle-stats

CLI to generate bundle stats report.

bundle-stats-webpack-plugin

Webpack plugin to generate bundle stats report for webpack/rspack.

next-plugin-bundle-stats

Next.js plugin for bundle-stats.

rollup-plugin-bundle-stats

Rollup plugin to generate bundle stats report for vite/rolldown/rollup.

Related projects

relative-ci.com

Automated bundle analysis, reviews and monitoring - Quickly identify and fix bundle regressions before shipping to production.

• In-depth bundle stats analysis for every build
• Monitor bundle stats changes and identify opportunities for optimizations
• Quick feedback with rule based automated review flow, GitHub Pull Request comments, GitHub check reports, or Slack messages
• Support for webpack, vite, rspack, rollup, rolldown
• Support for all major CI services(CircleCI, GitHub Actions, Gitlab CI, Jenkins, Travis CI)
• Support for npm, yarn and pnpm; support for monorepos
• Always free for Open Source

Get started

Get started

relative-ci/compare

Standalone web application to compare Webpack/Lighthouse/Browsertime stats.

Compare bundle stats

bundle-stats-action

Github Action that generates bundle-stats reports.