Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rollup-plugin-bundle-stats

Package Overview
Dependencies
Maintainers
3
Versions
126
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-bundle-stats

In-depth bundle analyzer for rollup(bundle size, assets, modules, packages)

  • 4.9.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
21K
decreased by-2.12%
Maintainers
3
Weekly downloads
 
Created
Source

rollup-plugin-bundle-stats

BundleStats screenshot

Demos: Bundle analysis comparison · Bundle analysis

BundleStats rollup plugin

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

Node version GitHub action CodeQL

RelativeCI

- 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)
:star: Side by side comparison for multiple builds

Table of Contents

Install

npm install --dev rollup-plugin-bundle-stats

or

yarn add --dev rollup-plugin-bundle-stats

Configure

Rollup

// rollup.config.js
const { bundleStats } = require('rollup-plugin-bundle-stats');

module.exports = {
  ...,
  output: {
    assetFileNames: 'assets/[name].[hash][extname]',
    chunkFileNames: 'assets/[name].[hash].js',
    entryFileNames: 'assets/[name].[hash].js',
  },
  plugins: [
    bundleStats()
  ]
};

Vite

// vite.config.js
const { bundleStats } = require('rollup-plugin-bundle-stats');

module.exports = {
  ...,
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash][extname]',
        chunkFileNames: 'assets/[name].[hash].js',
        entryFileNames: 'assets/[name].[hash].js',
      },
    },
  },
  plugins: [
    bundleStats()
  ]
};

How to configure Vite for better debugging and monitoring

Options

  • compare - use local saved stats for comparison (default true).
  • baseline - save current webpack stats as baseline (default false).
  • baselineFilepath - baseline absolute filepath or relative filepath to output.dir (default 'node_modules/.cache/bundle-stats/baseline.json')
  • html - output html report (default true).
  • json - output json report (default false).
  • outDir - output directory inside rollup output director output.dir (default '').
  • silent - stop logging info and only log warning and error (default false).

Compare mode

In compare mode, the metrics are compared against an existing(node_modules/.cache/bundle-stats/baseline.json) rollup stats file(baseline). To generate the baseline webpack stats, set BUNDLE_STATS_BASELINE environmental variable to true or set the plugin baseline option to true:

# Checkout to the branch/tag/commit where you want to generate the baseline
$ git checkout master

# Build your application with BUNDLE_STATS_BASELINE environmental variable
$ BUNDLE_STATS_BASELINE=true npm run build

# Checkout to the working branch/tag/commit
$ git checkout MY_FEATURE_BRANCH

# Build your application
$ npm run build

The option can be disabled by setting the plugin compare option to false.

Other packages

bundle-stats

npm npm

CLI to generate bundle stats report.

bundle-stats-webpack-plugin

npm npm

Webpack plugin to generate bundle stats report.

gatsby-plugin-bundle-stats

npm npm

Gatsby plugin for bundle-stats.

next-plugin-bundle-stats

npm npm

Next.js plugin for bundle-stats.

:cyclone: relative-ci.com

Optimize your web app's performance with automated bundle stats analysis and monitoring.
  • :crystal_ball: In-depth bundle stats analysis for every build
  • :chart_with_upwards_trend: Monitor bundle stats changes and identify opportunities for optimizations
  • :bell: Rule based automated review flow, or get notified via GitHub Pull Request comments, GitHub check reports and Slack messages
  • :wrench: Support for webpack and beta support for Vite/Rollup
  • :hammer: Support for all major CI services(CircleCI, GitHub Actions, Gitlab CI, Jenkins, Travis CI)
  • :nut_and_bolt: Support for npm, yarn and pnpm; support for monorepos
  • :two_hearts: Always free for Open Source

:rocket: Get started

:first_quarter_moon: relative-ci/compare

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

Compare bundle stats

:zap: bundle-stats-action

Github Action that generates bundle-stats reports.

Keywords

FAQs

Package last updated on 13 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc