How do I set up rollup-plugin-size-snapshot in my Rollup configuration?

Import the plugin and add it to your Rollup plugins array, ensuring it's placed before minification plugins like uglify or terser. Configure options like snapshotPath or threshold as needed for your project.

What does the treeshaking analysis in rollup-plugin-size-snapshot actually measure?

It measures the bundle size when nothing is imported from the library, using both Rollup and Webpack for es format. This helps identify how much dead code might be included if users don't import specific parts.

rollup-plugin-size-snapshot or rollup-plugin-visualizer for tracking bundle sizes?

rollup-plugin-size-snapshot focuses on automated size tracking and snapshot validation for CI, while rollup-plugin-visualizer provides interactive visualizations but lacks built-in regression prevention. Choose based on whether you need automation or visuals.

How can I use the snapshot validation in GitHub Actions CI?

Enable matchSnapshot in your Rollup config during CI runs, commit the .size-snapshot.json file, and set thresholds to define acceptable size differences. This will fail the build if sizes exceed limits, catching regressions early.

Does rollup-plugin-size-snapshot work with Vite projects?

It only works directly with Rollup, but since Vite uses Rollup internally for production builds, you might integrate it with custom Rollup configs in Vite, though it's not officially supported and can be complex.

How to interpret the .size-snapshot.json file outputs?

The JSON file stores actual, minified, and gzipped sizes for each bundle, along with treeshaking data. Compare entries over time to track changes, and use CI tools to automate checks against thresholds for regression detection.

Open-Awesome

rollup-plugin-size-snapshot

MITJavaScriptv0.12.0

A Rollup plugin to track library bundle sizes and treeshakability with detailed snapshots.

GitHub

166 stars11 forks0 contributors

What is rollup-plugin-size-snapshot?

rollup-plugin-size-snapshot is a Rollup plugin that automatically tracks and reports the size of JavaScript bundles, including actual, minified, and gzipped measurements. It helps library developers ensure their packages remain lightweight and treeshakable by analyzing how much code users will actually consume. The plugin stores size data in a snapshot file for easy comparison and regression detection.

Target Audience

JavaScript library developers using Rollup as their bundler, especially those focused on optimizing bundle size and ensuring efficient treeshaking for end-users.

Value Proposition

Developers choose this plugin because it provides automated, detailed size insights directly within their Rollup build process, reducing manual effort. Its unique ability to analyze treeshakability with both Rollup and Webpack helps guarantee that libraries don't force unnecessary code on consumers.

Overview

Track your library bundles size and its treeshakability with less effort

Use Cases

Best For

Monitoring bundle size regressions in CI pipelines
Analyzing treeshakability of multi-part libraries
Comparing minified vs. gzipped bundle impacts
Ensuring libraries remain lightweight for npm distribution
Validating size changes before publishing new versions
Integrating size tracking into Rollup-based build workflows

Not Ideal For

Applications built with bundlers other than Rollup, such as Webpack or Vite, without Rollup integration
Projects where developers only need occasional, manual size checks without automated tracking or CI integration
Teams seeking integrated visualization dashboards for long-term bundle size trend analysis
Libraries that output primarily non-ES formats like CommonJS, where treeshaking analysis is limited

Pros & Cons

Pros

Comprehensive Size Metrics

Tracks actual, minified, and gzipped bundle sizes, providing a holistic view of parsing and download overhead as highlighted in the README for critical library evaluation.

Treeshaking Insight

Analyzes treeshakability with both Rollup and Webpack for es format bundles, a unique feature that helps ensure no dead code is shipped in multi-part libraries.

CI-Friendly Validation

Supports snapshot matching in CI pipelines with configurable thresholds, automating regression detection to prevent unexpected size increases, as described in the matchSnapshot option.

Simple Integration

Easily added to Rollup configurations with minimal setup, and options like printInfo allow customization of terminal logging for streamlined workflows.

Cons

Rollup-Only Limitation

Exclusively designed for Rollup, making it incompatible with other bundlers like Webpack or Vite without complex integration, severely limiting its applicability in mixed ecosystems.

CI-Centric Design Flaw

The matchSnapshot feature is intended for CI use, and using it locally is unintended and problematic, as admitted in the README referencing issue #33, which can confuse developers during local development.

Limited Treeshaking Scope

Treeshakability analysis only works with the es output format, restricting its utility for libraries that output other formats like CommonJS or UMD, reducing its effectiveness for broader use cases.

Frequently Asked Questions

Related Projects

Size Limit

Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

Stars7,036

Forks1,751

Last commit16 days ago

Bundle Size

Keep your bundle size in check

Stars4,466

Forks176

Last commit2 months ago

Size Plugin

Track compressed Webpack asset sizes over time.

Stars1,662

Forks39

Last commit4 months ago

Progressive Web Metrics

Progressive web metrics at your fingertipz

Stars1,238

Forks69

Last commit3 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub