ritz078 / rollup-plugin-filesize

A rollup plugin to show file size of the bundle in the cli

rollup-plugin-filesize

A rollup plugin to show filesize in the cli

Installation

npm install rollup-plugin-filesize

Usage

import { rollup } from 'rollup';
import filesize from 'rollup-plugin-filesize';

rollup({
  entry: 'main.js',
  plugins: [
    filesize()
  ]
}).then(...)

options

showMinifiedSize

type: boolean default: true

Whether to show minified size or not

showGzippedSize

type: boolean default: true

Whether to show Gzipped size or not

showBrotliSize

type: boolean default: false

Whether to show Brotli size or not

showBeforeSizes

Note: this feature is experimental and may be changed in a future release.

type: "release", "build", or "none" default: "none"

Indicates how, if any, comparisons will be shown between the output.file file size as it was and as it is now being written.

If set to "release", will compare the file size at present to that of the last npm release.

If set to "build", the size of the file that is now being built will be compared to the immediately previous build. This means that if you run Rollup multiple times with this option, the info on the previous package size will be lost (since Rollup will have overwritten your copy), so with this option, you will need to consult your terminal history to see what the file size was prior to your changes. This option may be useful if you wish to compare size changes incrementally as you are developing rather than comparing to your last release.

format

type : object

default : {}

See the options here

reporter

(Note that this replaces the deprecated optional render function option.)

type : A reporter string (currently "boxen" only), a function, or an array thereof.

Defaults to "boxen".

After rendering occurs, you may wish to pass on the collected file data, e.g., to build a badge for filesizes (as does filesize-badger).

You can use reporter to do so:

filesize({
	reporter: [
		function (options, bundle, {
			minSize, gzipSize, brotliSize, bundleSize,
			fileName,
			// "showBeforeSizes: release"
			lastVersion,
			// "showBeforeSizes: "release" or "showBeforeSizes": "build"
			bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore
		}) {
			// If a promise is returned, it will be awaited before rendering.
			return promise;
		},
	],
});

theme

type: string

default : 'dark'

options : 'dark'/'light'

choose based on your terminal theme.

License

MIT

rollup-plugin-filesize's Issues

Why output gzipped size when I am not writing a gzip?

With my current rollup config I am not writing a gzip to the destination folder. But your plugin still displays gzip stats. Not necessary and confusing in my opinion. Can the plugin be smarter?

Avoid processing asset files

Rollup latest version emit a bundle collection which includes asset files (css,images,etc). Avid preprocessing such files.

Plugin outputs filesize of bundle before minification

UPDATE: Sorry, my bad. You have to always put this plugin last to get the final filesize, which i didn't. Closing this issue.

---

Hi, thank you for your useful plugin!

However, when i use it with the command, like:

rollup -co dist/rollup-filesize-bug-example.js --environment NODE_ENV:development && rollup -co dist/rollup-filesize-bug-example.min.js --environment NODE_ENV:production

with config:

import nodeResolve from 'rollup-plugin-node-resolve';
import uglify from 'rollup-plugin-uglify';
import filesize from 'rollup-plugin-filesize';
import { minify } from 'uglify-js';

const config = {
  entry: 'src/index.js',
  format: 'umd',
  moduleName: 'RollupFilesizeBugExample',
  plugins: [
    nodeResolve({
      jsnext: true,
      main: true,
      preferBuiltins: true
    }),
    filesize()
  ]
};

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    uglify({
      compressor: {
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true,
        warnings: false
      }
    }, minify)
  );
}

export default config;

It outputs file size of bundle before minification.

Filesize gets logged twice

I'm on windows 10, and using Rollup version 1.1.2.
When I run rollup the output is produced, but the filesize information is logged twice.
I'm using Rollup through its programmatic api:

const config = {
  input: "src/...",
  output: {
    file: "dist/...",
    format: "iife",
    name: "Foo",
    banner: "...",
  },
  plugins: [
    // Other plugins ...
    filesize({
      render(_, bundle, { gzipSize, bundleSize }){
        const filename = bundle.file.split("\\").slice(-1)[0];
        return `${filename}: ${bundleSize} (${gzipSize} gzipped).`;
      }
    }),
  ],
}

const bundle = await rollup.rollup(config);
await bundle.generate(config.output);
await bundle.write(config.output);

Error: Cannot find module 'terser'

Version 4.0.0 (perhaps also 3.0.0) throws the error

Error: Cannot find module 'terser'

Should terser have been in dependencies instead of devDependencies? (works if installing terser manually)

File sizes before and after minification

It would be great if filesize could show file sizes before and after minification (uglify, terser) and the percent points of compression as well.

rollup outputs error when sourcemap is true

[Error: Cannot generate a sourcemap if non-sourcemap-generating transformers are used]

rollup-plugin-filesize

Only other plugin is babel.

Node.js warning

Hi there,

Thanks for the repo!

I've been receiving this warning during my builds, is this something anyone else is experiencing?

Thanks

(node:24726) Warning: N-API is an experimental feature and could change at any time.

npm install warning

Not a big deal, but it would be great to remove this warning:

Not compatible with rollup 0.60

Without plugin it works fine. But with I got this log:

> rollup -c scripts/rollup-build.js


src/index.js → dist/vue-socket.io-ext.esm.js, dist/vue-socket.io-ext.min.js...
[!] TypeError: this.getData is not a function
TypeError: this.getData is not a function
    at Object.ongenerate (/home/circleci/repo/node_modules/rollup-plugin-filesize/dist/index.js:42:21)
    at /home/circleci/repo/node_modules/rollup/dist/rollup.js:21676:58
    at Array.map (<anonymous>)
    at /home/circleci/repo/node_modules/rollup/dist/rollup.js:21675:34

Source not up to date

At least source for 1.3.1 is missing on github.

I was surprised when I found out this package was trying to get more stars through code (in package.json) which was not available on github.

Cannot install on windows machine

Summary
Trying to install the package for a rollup build on a machine with only node and npm installed. I get an error that prevents installation.

Here is the detailed error

C:\Users\ysood\Source\Sandbox\redux-form-datagrid>npm install --save rollup-plugin-filesize

> [email protected] install C:\Users\ysood\Source\Sandbox\redux-form-datagrid\node_modules\iltorb
> node ./scripts/install.js || node-gyp rebuild

info looking for cached prebuild @ C:\Users\ysood\AppData\Roaming\npm-cache\_prebuilds\45bfec-iltorb-v2.4.1-node-v64-win32-x64.tar.gz
http request GET https://github.com/MayhemYDG/iltorb/releases/download/v2.4.1/iltorb-v2.4.1-node-v64-win32-x64.tar.gz
WARN install unable to get local issuer certificate

C:\Users\ysood\Source\Sandbox\redux-form-datagrid\node_modules\iltorb>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:154:21)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\ysood\Source\Sandbox\redux-form-datagrid\node_modules\iltorb
gyp ERR! node -v v10.13.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @babel/[email protected] requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node ./scripts/install.js || node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ysood\AppData\Roaming\npm-cache\_logs\2018-11-15T15_53_54_364Z-debug.log

Appears that one of the dependencies needs python and is somehow also failing to find some local issuer certificate . Not sure if it's a good idea for a node package to depend on a completely different technology.

Sadly having to remove this for now from my package as it is preventing contributors from working on it. Will add once fixed.

Unable to find boxen.js module

I followed a simple setup based on the readme, but I get this when attempting to rollup while using the filesize plugin.

Error: Cannot find module 'C:/git/my-widget-pkg/node_modules/rollup-plugin-filesize/dist/reporters/boxen.js'

Full Error Output

> rollup -c

babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers

src/main.js → bin/component.js...
[!] (plugin filesize) Error: Cannot find module 'C:/git/my-widget-pkg/node_modules/rollup-plugin-filesize/dist/reporters/boxen.js'
Error: Cannot find module 'C:/git/my-widget-pkg/node_modules/rollup-plugin-filesize/dist/reporters/boxen.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at C:\git\my-widget-pkg\node_modules\rollup-plugin-filesize\src\index.js:142:12
    at new Promise (<anonymous>)
    at map (C:\git\my-widget-pkg\node_modules\rollup-plugin-filesize\src\index.js:142:12)
    at Array.map (<anonymous>)
    at getLoggingData (C:\git\my-widget-pkg\node_modules\rollup-plugin-filesize\src\index.js:138:15)
    at Promise.all.Object.keys.map.filter.map.currentBundle (C:\git\my-widget-pkg\node_modules\rollup-plugin-filesize\src\index.js:172:14)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\me\AppData\Roaming\npm-cache\_logs\2020-06-10T12_42_34_874Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:manual: `npm run build && cd testsManual/react && npm start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:manual script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\me\AppData\Roaming\npm-cache\_logs\2020-06-10T12_42_34_951Z-debug.log

Here is my rollup.config.js

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import localResolve from 'rollup-plugin-local-resolve';

import pkg from './package.json';

const INPUT_FILE_PATH = 'src/main.js';
const OUTPUT_NAME = 'MyWidget';

const GLOBALS = {
  react: 'React',
  'react-dom': 'ReactDOM',
};

const PLUGINS = [	
	filesize(),
  postcss({
    extract: true,
    plugins: [
      autoprefixer,
    ],
  }),
  babel({
    exclude: 'node_modules/**',
  }),
  localResolve(),
  resolve({
    browser: true,
  }),
  commonjs()
];

const EXTERNAL = [
  'react',
  'react-dom',
];

const OUTPUT_DATA = [
  {
    file: pkg.browser,
    format: 'umd',
  },
  {
    file: pkg.main,
    format: 'cjs',
  },
  {
    file: pkg.module,
    format: 'es',
  },
];

const config = OUTPUT_DATA.map(({ file, format }) => ({
  input: INPUT_FILE_PATH,
  output: {
    file,
    format,
    name: OUTPUT_NAME,
    globals: GLOBALS,
  },
  external: EXTERNAL,
  plugins: PLUGINS,
}));

export default config;

SyntaxError: unknown: 'import' and 'export' may appear only with 'sourceType: "module"'

rollup version 0.66.6
rollup-plugin-filesize version 5.0.0

When build with output.format = esm throws an error:

[!] (filesize plugin) SyntaxError: unknown: 'import' and 'export' may appear only with 'sourceType: "module"'
Consider renaming the file to '.mjs', or setting sourceType:module or sourceType:unambiguous in your Babel config for this file.

With rollup-plugin-filesize version 4.0.1 there is no such problem.

Allow building SVG badges or add a hook so one can get at data to do so

Hi,

During the process of getting size info, I'd like to be able to use that info, e.g., with badge-up, to build badge(s) which can be added to one's README to show the current file size of one's dist files.

I was wondering if you wanted this support built-in (badge-up only adds 16KB, it being an SVG generator rather than a PNG generator), or at least if you could allow users to supply a hook function that was given the generated size info, so they could make their own badge (or whatever).

Thanks for the excellent tool!

(FWIW, we're already using this approach to build local badges for Mocha, license types, and coverage, and filesize would be a great addition.)

8.0.0 crashes with 'Cannot find module boxen.js'

I have been using this plugin happily for ages. Noticed there was 8.0.0 available, so upgraded and now the plugin throws this error when building:

./dev/index.ts → ./dev/dist/index.js...
(node:16660) ExperimentalWarning: The fs.promises API is experimental
[!] (plugin filesize) Error: Cannot find module '/D:/wamp/www/phaser-genesis/node_modules/rollup-plugin-filesize/dist/reporters/boxen.js'
Error: Cannot find module '/D:/wamp/www/phaser-genesis/node_modules/rollup-plugin-filesize/dist/reporters/boxen.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at D:\wamp\www\phaser-genesis\node_modules\rollup-plugin-filesize\src\index.js:125:12
    at new Promise (<anonymous>)
    at map (D:\wamp\www\phaser-genesis\node_modules\rollup-plugin-filesize\src\index.js:125:12)
    at Array.map (<anonymous>)
    at getLoggingData (D:\wamp\www\phaser-genesis\node_modules\rollup-plugin-filesize\src\index.js:121:15)
    at Promise.all.Object.keys.map.filter.map.currentBundle (D:\wamp\www\phaser-genesis\node_modules\rollup-plugin-filesize\src\index.js:158:14)

This is with node v10.16.0 and Rollup 2.7.6 on Windows 10.

Downgrading to filesize 7.0.0 works fine.

[feature] configurable log

According to the index.js (L184) there's no other way than receiving the filesize via CLI stdout, it'd be pretty cool to be able to configure one for own streams (or additional to the log for own streams?) or similar 🔍

Tag/bump to release version 6.0.2?

PR #40 isn't in the current released NPM version (6.0.1). Any chance we could get a bump on the release version so PR 40 is there? Cheers!

Improvements

• change lodash to something like deep-assign. lodash is too big module. I recommend to use more atomic modules.
• move options processing into the previous scope filesize. This will make code more compact and simple.
• Add a few test cases with different options. I recommend ava which has babel support out of the box.

`rollup-plugin-filesize` requires node-gyp to install

My CICD that uses a node docker image to build is failing on install because rollup-plugin-filesize depends on [email protected] which uses iltorb -> node-gyp. node-gyp requires python, make, and C/C++ compiler.

It would be nice if rollup-plugin-filesize works on a node-only machine.

Latest brotli-size uses native brotli library of node >= 10.16. So one option is to update brotli-size dependency.

Another option is to move brotli-size dependency to optionalDependencies since it's an optional feature of this plugin. That way npm install won't fail when brotli-size fails node-gyp dependencies.

I posted more info on #33, but haven't gotten an answer.
My current workaround is to use [email protected], before #22 added brotli-size as a dependency.

Pass in terser options or custom minimizer

I am using this plugin and the final size of my bundle doesn't match the size shown, probably because I am using my own terser plugin options, so it would be interesting if we could pass terser options to your plugin so your plugin can use it to get the minified size, hope it makes sense.

Also what is I use another minifier (say uglifyjs)? I dont think the sizes will match either.

`showBeforeSizes` name resolution

Currently the name resolution is based on the current working directory. It'd be nice to have that be a fallback, and instead prioritize the name of the outputOptions or something a little more flexible. I use this in my monorepo, and the package.json isn't reflective of all of the packages.

I may find some time to make a PR myself, but would love some thoughts on this.

Chalk forced?

Just wondering: is there a reason why you pass enabled: true to chalk? We run your code on a build server and it's the only thing that outputs color.

Is there a proper changelog?

Hello!

Thank you for this great plugin!

However, is there a proper changelog?

I'm doing a ^6.2.1 → ^9.0.0 migration and I can't figure out what breaking changes should I take into consideration.

Thanks!

Use gzip size on a non minified output

From the version 5.0.0 the gzip size is always computed on a minified bundle. But it might happen that you want to display the size for a non minified bundle (e.g Rollup is used to generate two bundles one minified and one non minified).

filesize({
  showMinifiedSize: false,
  showGzippedSize: true,
}),

// expected output → file size gzipped on non minified source code

---

filesize({
  showMinifiedSize: true,
  showGzippedSize: true,
}),

// expected output → file size gzipped on minified source code

rollup-plugin-filesize/src/index.js

Lines 50 to 58 in 22e8c89

	if (opts.showMinifiedSize || opts.showGzippedSize) {
	const minifiedCode = terser.minify(code).code;
	sizes.minSize = opts.showMinifiedSize
	? fileSize(minifiedCode.length, opts.format)
	: "";
	sizes.gzipSize = opts.showGzippedSize
	? fileSize(gzip.sync(minifiedCode), opts.format)
	: "";
	}

[performance] makes build 1.5 times slower

Problem:

Enabling filesize plugin makes build 1.5 times slower

Filesize enabled:

Filesize disabled:

Versions:

MacOS 11.3.1
Node 14 LTS
Rollup v2.47.0
rollup-plugin-filesize v1.5.1

I could provide more additional info about my config, if you'll need

Update dependencies

Because the version of the pacote dependency is outdated, the following is produced when installing rollup-plugin-filesize:

npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

(the dependency chain is [email protected] - [email protected] - @npmcli/[email protected] - [email protected] - [email protected])
This can be fixed by updating the pacote dependency from 11.2.7 to 13.6.0 (and preferably also other dependencies).

Perf issues on CI (travis)

Not sure what can be done to improve the situation, but when using rollup's experimentalCodeSplitting each generated chunk gets passed to this plugin (in our case its dozens of times) and this caused Travis to REALLY slow down due to too high memory usage or something.

It went from 5 minutes to 19 minutes.

Build size differences

Great work on this plugin 🎉

In looking through the source and reading the docs here it struck me that there might be another vector for useful information in this plugin: build size differences. Keeping track of config hashes or some other somewhat-static element and caching build sizes based on an identifier (say, in a file in a temp directory, or in the module itself) and displaying size increases or decreases, might be useful to folks.

New release with terser 5.2

Terser 5.2 supports ES2020, which importantly has optional chaining and nullish coalescing: terser/terser#643

(!) Accessing "isAsset" on files in the bundle is deprecated, please use "type === 'asset'" instead

I get this warning spammed to the console (once for every file in my bundle) when using this plugin and Rollup 2.0.6. The fix appears quite easy in the source, but may break backward compatibility?

Optionally display destination info

When multiple bundles are generated it would be great to have the option to display which bundle the size information relates to. I.E

Dest: dist/scripts/bundle.js
Bundle size: 4842 B, Gzipped size: 1669 B

Upgrade rollup to 1.0.0?

Rollup has just released v1.0.0, and it gave me the following warning:

(!) filesize plugin: The ongenerate hook used by plugin filesize is deprecated. The generateBundle hook should be used instead.

Consider upgrading rollup to v1.0.0 and using the new hook?

Add an option which could limit the file size

I suggest adding an option to limit file size like the performance plugin of webpack

package.json main is pointing to null

in package.json main field is pointing to "main": "dist/index.js", but dist folder is not shipped with NPM in this plugin.

using plugin fails with following exception:

Error: Cannot find module 'rollup-plugin-filesize'

usage:

import filesize from 'rollup-plugin-filesize';

ps. It was working fine few days ago

Narrow down version of "colors" dependency

Due to an issue with the newest version of the colors package it would be great if the dependency is not specified as ^1.4.0 but 1.4.0 instead so the broken package version 1.4.2 is not installed.

(feat req) Add support for brotli

https://www.npmjs.com/package/brotli

SourceMap support

Hi, thanks for this nice plugin I like it a lot. But if it is enabled in plugins the sourcemaps a gone.

Sourcemaps with filesize:

{"version":3,"file":null,"sources":[],"sourcesContent":[],"names":[],"mappings":""}

Without filesize the sourcemaps are working fine.

feat: add vite support

[feature] per-file sizes

It might be cool to have an option to output the size per file like https://www.npmjs.com/package/rollup-plugin-summary does

Gzipped Size is inaccurate

"rollup-plugin-filesize": "^10.0.0"

Actually size is:

i use rollup-plugin-gzip

Please stop using "starring" in npm postinstall

Hi,

I'd like not to be forced to star a package from npm providing Github's username, password as well as second factor authentication.

If you want to keep starring in your package.json please add the ability to skip the process without failing the install.

> [email protected] postinstall C:\Users\<me>\Documents\<some path>\node_modules\rollup-plugin-filesize
> starring rollup-plugin-filesize

Your GitHub username:

0.4->0.5 broke my build

After this commit the plugin does not print anything in my project :
750583b

I assume this should have been a Major update 0.4->1.0.

Please, republish as 1.0.

And thank you for the awesome plugin!