rollup-plugin-size-snapshot

0.12.0 verified Mon Apr 27 auth: no javascript maintenance

Rollup plugin that generates a .size-snapshot.json file tracking actual, minified, and gzipped bundle sizes. Current stable version v0.12.0 requires rollup >=2 and Node >=10. Key differentiator: also shows treeshaken sizes for es output via both Rollup and Webpack to detect dead code. Supports threshold for CI snapshot matching.

Common errors

error Error: Cannot find module 'rollup-plugin-size-snapshot' ↓

cause Package not installed

fix

npm install --save-dev rollup-plugin-size-snapshot

error TypeError: sizeSnapshot is not a function ↓

cause Using default import instead of named import

fix

Change to: import { sizeSnapshot } from 'rollup-plugin-size-snapshot'

error Plugin 'size-snapshot': Cannot find module 'terser' ↓

cause Missing terser dependency when using minification

fix

npm install --save-dev terser or rollup-plugin-terser accordingly

Warnings

breaking v0.12.0 dropped support for rollup < 2 ↓

fix Upgrade rollup to >=2.0.0

breaking v0.8.0 upgraded to rollup v1, breaking rollup < 1 ↓

fix Upgrade rollup to >=1.0.0

gotcha Place uglify/terser plugins after sizeSnapshot to get correct minified sizes ↓

fix Order plugins: [sizeSnapshot(), uglify({ toplevel: true })]

gotcha matchSnapshot is intended for CI, not local development ↓

fix Set matchSnapshot: true only in CI environment, not in default config.

deprecated rollup-plugin-uglify is deprecated; use rollup-plugin-terser instead ↓

fix Replace uglify with terser: import { terser } from 'rollup-plugin-terser'

Install

npm install rollup-plugin-size-snapshot

yarn add rollup-plugin-size-snapshot

pnpm add rollup-plugin-size-snapshot

Imports

sizeSnapshot

wrong

import sizeSnapshot from 'rollup-plugin-size-snapshot'

correct

import { sizeSnapshot } from 'rollup-plugin-size-snapshot'

This plugin exports a named function; default import does not work.

sizeSnapshot

wrong

const sizeSnapshot = require('rollup-plugin-size-snapshot')

correct

const { sizeSnapshot } = require('rollup-plugin-size-snapshot')

CommonJS require must destructure the named export.

types

wrong

import { RollupOptions } from 'rollup-plugin-size-snapshot'

correct

import type { RollupOptions } from 'rollup'

This plugin does not export types; they come from Rollup itself.

Quickstart

This code shows the basic usage of the plugin with a Rollup config, outputting an ES bundle and generating a snapshot file.

import { sizeSnapshot } from 'rollup-plugin-size-snapshot';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    sizeSnapshot({
      snapshotPath: '.size-snapshot.json',
      printInfo: true
    })
  ]
};