rollup-plugin-output-size

A Rollup plugin that displays output bundle sizes.

This project was inspired by rollup-plugin-bundle-size.

Install

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

Usage

// ESM
import outputSize from 'rollup-plugin-output-size';

// CommonJS
const { outputSize } = require('rollup-plugin-output-size');

Use the plugin, example rollup.config.js:

import outputSize from 'rollup-plugin-output-size';

export default {
  input: 'index.js',
  output: { dir: 'dist' },
  plugins: [outputSize(/* plugin options */)]
};

Options

You can change and override the behavior of this plugin through its options. Note that all options are optional.

bytes

Type: boolean
Default: false

Displays the size in bytes for both the output info and summary output (e.g. 4,096 B instead of 4.1 kB).

hide

Type: boolean | OutputType[]
Default: false

Disables output types display.

Set to true to disable output for all output types, or set an array to specify which output types will not be displayed.

Output types are: asset, chunk, and entry.

Note: Both chunk and entry output types are OutputChunks but entry chunks have isEntry values of true.

This option does not affect summary output.

gzip

Type: boolean | OutputType[]
Default: true

Gets gzipped sizes of output.

Set to false to skip getting gzipped size, or set an array to only get gzipped sizes of specified output types.

silent

Type: boolean
Default: false

Disables output. This will also skip the handle and summary callbacks.

summary

Type: boolean | 'always' | SummaryCallback
Default: true

Displays summary output.

• Set to false to disable summary output.
• Set to 'always' to force summary output even if there is only one (1) output.
• Set a callback to override default summary output.

See types in summary.types.ts.

Note

The total gzip size of the summary output may not be entirely accurate as it is only the sum of all the individual output gzip sizes. If you need a more accurate size, you can use archiver to create an archive with all output contents and get the gzip size of that instead.

handle

Type: (info: OutputInfo, output: OutputAsset | OutputChunk) => void | Promise<void>

Overrides the default logging of output info.

The second argument output is the current Rollup output asset or chunk to log, while the first argument is the OutputInfo.

See types in output.types.ts.

Other Utilities

This package also includes some utility functions that you may find helpful, especially when making use of the handle and summary options.

format

Type: (info: OutputInfo, options?: Pick<Options, "bytes">) => string

Gets the default display format of output info.

import outputSize, { format } from 'rollup-plugin-output-size';

export default {
  input: 'index.js',
  output: { dir: 'dist' },
  plugins: [
    outputSize({
      handle(info) {
        console.log(format(info));
      }
    })
  ]
};

[{type}] {path} is {hSize} → {gzip.hSize} (gzip)

gzip (util)

Type: (input: string | Uint8Array) => Promise<Size>

Gets the gzipped size of input.

import outputSize, { gzip } from 'rollup-plugin-output-size';

export default {
  input: 'index.js',
  output: { dir: 'dist' },
  plugins: [
    outputSize({
      gzip: false,
      async handle(info, output) {
        const data = output.type === 'chunk' ? output.code : output.source;
        const gzipInfo = await gzip(data);
        console.log(info.path, gzipInfo);
      }
    })
  ]
};

summarize

Type: (summary: Summary, options?: Pick<Options, "bytes">) => string

Gets the default display format of summary info.

import outputSize, { summarize } from 'rollup-plugin-output-size';

export default {
  input: 'index.js',
  output: { dir: 'dist' },
  plugins: [
    outputSize({
      summary(summary) {
        console.log(summarize(summary));
      }
    })
  ]
};

[total] {entry.hSize} + {chunk.hSize} + {asset.hSize} = {total.hSize}
[total] {gzip.entry.hSize} + {gzip.chunk.hSize} + {gzip.asset.hSize} = {gzip.total.hSize} (gzip)

License

Licensed under the MIT License.