How to exclude certain files from size-plugin tracking?

Use the exclude option in the plugin configuration with a minimatch pattern, such as 'exclude: *.map', to filter out specific assets like source maps from size reporting.

size-plugin vs webpack-bundle-analyzer: which is better?

size-plugin is ideal for quick size diffs and CI integration, focusing on gzipped changes, while webpack-bundle-analyzer provides visual treemaps for in-depth bundle exploration; choose based on need for speed versus detailed analysis.

Does size-plugin work with Webpack 5?

Yes, size-plugin is compatible with Webpack 5 as a standard plugin, but always check the npm version for any specific updates or compatibility notes in the documentation.

How to save size-plugin data to a file for historical tracking?

Enable the writeFile option and specify a filename in the plugin settings, which saves size data to disk, allowing you to compare builds over time as mentioned in the persistent storage feature.

Can I use size-plugin in my CI/CD pipeline?

Yes, it integrates well into CI environments by outputting to the terminal, and with persistent data storage, you can track size changes across builds to enforce performance budgets.

What do the colors mean in size-plugin terminal output?

Colors indicate size changes: typically red for increases, green for decreases, and neutral colors for no change, helping quickly identify regressions as shown in the example image.

Is there a size-plugin alternative for Vite?

For Vite, consider plugins like vite-plugin-compression or rollup-plugin-size (since Vite uses Rollup), as size-plugin is Webpack-specific and won't work directly.

Size Plugin — Webpack Asset Size Tracker

What is Size Plugin?

size-plugin is a Webpack plugin that automatically tracks and reports the gzipped sizes of your compiled JavaScript, CSS, and other web assets. It solves the problem of bundle size creep by showing exactly how much each file changed since the last build, helping developers maintain performance budgets and optimize loading times.

Target Audience

Frontend developers and teams using Webpack who need to monitor and control their application's bundle sizes, especially those working on performance-sensitive web applications.

Value Proposition

Developers choose size-plugin because it provides zero-configuration size tracking with clear visual diffs, integrates seamlessly into existing Webpack workflows, and helps prevent performance regressions by making bundle size changes immediately visible.

Track compressed Webpack asset sizes over time.

Use Cases

Best For

Monitoring JavaScript bundle size changes in CI/CD pipelines
Enforcing performance budgets during frontend development
Identifying which Webpack chunks are growing unexpectedly
Tracking the impact of new dependencies on final asset sizes
Comparing gzipped asset sizes before and after code changes
Visualizing bundle size trends over multiple builds

Not Ideal For

Projects using bundlers other than Webpack, such as Vite or esbuild
Developers needing real-time size monitoring during hot module replacement
Teams requiring detailed bundle visualizations or dependency breakdowns
Applications where uncompressed asset sizes are more critical than gzipped sizes

Pros & Cons

Pros

Zero-Config Setup

Simply add the plugin to webpack.config.js for instant size tracking without additional configuration, as shown in the minimal usage example.

Clear Delta Reporting

Outputs color-coded size differences in the terminal after each build, making it easy to spot increases or decreases at a glance, evidenced by the provided screenshot.

Persistent Data Storage

Can save size history to disk using options like filename and writeFile, enabling consistent trend analysis across builds without manual logging.

Flexible File Filtering

Supports minimatch patterns to include or exclude specific assets, allowing focused monitoring on relevant files as per the pattern and exclude options.

Cons

Bundler Lock-in

Exclusively designed for Webpack, making it incompatible with other popular bundlers like Vite or esbuild without relying on separate ports or alternatives.

Limited Export Options

Primarily outputs to CLI with no built-in support for exporting data in structured formats like JSON, hindering integration with external dashboards or tools.

No Deep Insights

Only reports gzipped sizes and deltas, lacking analysis on why sizes changed or which dependencies contributed most, which limits optimization guidance.

Frequently Asked Questions

What is Size Plugin?

Target Audience

Frontend developers and teams using Webpack who need to monitor and control their application's bundle sizes, especially those working on performance-sensitive web applications.

Value Proposition

Use Cases

Best For

Monitoring JavaScript bundle size changes in CI/CD pipelines
Enforcing performance budgets during frontend development
Identifying which Webpack chunks are growing unexpectedly
Tracking the impact of new dependencies on final asset sizes
Comparing gzipped asset sizes before and after code changes
Visualizing bundle size trends over multiple builds

Not Ideal For

Projects using bundlers other than Webpack, such as Vite or esbuild
Developers needing real-time size monitoring during hot module replacement
Teams requiring detailed bundle visualizations or dependency breakdowns
Applications where uncompressed asset sizes are more critical than gzipped sizes

Pros & Cons

Pros

Zero-Config Setup

Simply add the plugin to webpack.config.js for instant size tracking without additional configuration, as shown in the minimal usage example.

Clear Delta Reporting

Outputs color-coded size differences in the terminal after each build, making it easy to spot increases or decreases at a glance, evidenced by the provided screenshot.

Persistent Data Storage

Can save size history to disk using options like filename and writeFile, enabling consistent trend analysis across builds without manual logging.

Flexible File Filtering

Supports minimatch patterns to include or exclude specific assets, allowing focused monitoring on relevant files as per the pattern and exclude options.

Cons

Bundler Lock-in

Exclusively designed for Webpack, making it incompatible with other popular bundlers like Vite or esbuild without relying on separate ports or alternatives.

Limited Export Options

Primarily outputs to CLI with no built-in support for exporting data in structured formats like JSON, hindering integration with external dashboards or tools.

No Deep Insights

Only reports gzipped sizes and deltas, lacking analysis on why sizes changed or which dependencies contributed most, which limits optimization guidance.

Frequently Asked Questions

Size Plugin

What is Size Plugin?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Size Plugin

What is Size Plugin?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?