ai / 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.

My projects and areas of expertise:

• CSS processing & front-end tooling: Autoprefixer, Browserslist, PostCSS, and many PostCSS plugins.
• Web tools: OKLCH Color Picker, Browserslist REPL, Easing Functions Cheat Sheet.
• JS nano libraries: Size Limit to track library size, NanoID, Nano Stores, Nano Events, Nano Delay.
• CRDT & distributed systems: Logux.
• Calligraphy & language diversity: Linguopunk Twitter, Твиттер Лингвопанка, Телеграм Лингвопанка.
• Linux: my configs, my keyboard layout, and GNOME Shell extensions: Autohide Battery, Hide Keyboard Layout.

                                               

size-limit's Issues

Custom builder and --why

Running size-limit on react-dropzone throws an error:

$ size-limit --why
 ERROR  Error: 
ERROR in ./src/index.js
Module parse failed: /Users/okonet/Projects/OSS/react-dropzone/src/index.js Unexpected token (266:17)
You may need an appropriate loader to handle this file type.
|   }
| 
|   renderChildren = (children, isDragActive, isDragAccept, isDragReject) => {
|     if (typeof children === 'function') {
|       return children({
 @ multi ./src/index.js
    at runWebpack.then.stats (/Users/okonet/Projects/OSS/react-dropzone/node_modules/size-limit/index.js:150:15)
    at <anonymous>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Looking at code I could not find babel-loader. Is this project suppose to only be used with ES5 code?

Work with Raisl 5 + Webpacker?

It seems to work with Webpacker, but the --why doesn't spit anything out.

In package.json:

  "scripts": {
    "size": "size-limit"
  },
  "size-limit": [
    {
      "path": "./app/javascript/packs/player.js"
    }
  ],

When I run it:

→ NODE_ENV=test npm run size --why

> @ size /Users/patrick.minton/src/boxscoregeeks
> size-limit


  Package size: 134 B
  With all dependencies, minified and gzipped

(but no browser window opens). I tried with and without NODE_ENV=test (hoping that with test, it would spit out a static HTML file).

this is on a Mac running Sierra, in a Rails 5.1 project that uses webpacker

Any thoughts?

Enable options to load different config files from command-line or npm script

Probably would be a great improvement to have and option to load different configuration files either from npm run size or from cli

Just like .dotenv file you could have .size-limit which will always be the default one and eventually .size-limit.prod

Add markdown to static files list

RIght now loading a package with static markdown content makes parsing error as it does not know what loader to use.
adding md to the static list at index.js

const STATIC =
  /\.(eot|woff2?|ttf|otf|svg|png|jpe?g|gif|webp|mp4|mp3|ogg|pdf|html|ico|md)$/

fixed the issue. Is there any reason to not add markdown to the list?

Error: “Size Limit can't resolve fs”

When attempting to run size-limit, I get this error:

 ERROR  Size Limit can't resolve
        fs
        in /Users/jaydenseric/Sites/apollo-upload-server/node_modules/busboy/lib

When using "webpack": false the error does not appear.

Better config validation

1. Providing an object instead of array in the config results in

 ERROR  TypeError: limits.map is not a function
    at readPkg.then.result (/Users/okonet/Projects/OSS/attr-accept/node_modules/size-limit/cli.js:98:31)
    at <anonymous>

It would be much better to see a human friendly validation error saying that config must be an Array of objects with an example.

2. Running without config results in

 ERROR  Can not find "size-limit" section in package.json.
        Add it according Size Limit docs.

Much better experience would be to generate the config on the first run automatically or at least help with an example.

What about major release?

Thank you for this util, it is very useful!

When do you plan to make major v1 release?

Should not try to bundle CSS and other asset files

I think size-limit should not try to bundle CSS files and other references asset files which are typically bundled using configured loaders.

Background: Our component library is using CSS modules and is exported as library where the CSS references are kept in-tact. This should probably not throw with tools like "size-limit".

I see that there is already a small section for image assets going to the file-loader:

https://github.com/ai/size-limit/blob/master/index.js#L35

We could extend this with far more file types e.g. webfonts and/or add a custom css-loader based section for CSS files.

At least size-limit should not throw errors when reaching these super typical files when doing bundling with webpack.

Errors on install with Node.js 8.1.3 and npm 5.1.0

I just tried adding this to stylelint, I was curious to see what the package size was 😄

With Node.js 8.1.3 and npm 5.1.0 the following errors are seen when installing:

❯ npm i
npm WARN deprecated [email protected]: Use mz or fs-extra^3.0 with Promise Support
WARNWARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw== integrity checksum failed when using sha512: wanted sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw== but got sha1-hDGQ/WtzV6C54clW7d3V7IRitU0=. (100003 bytes)
 WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw== integrity checksum failed when using sha512: wanted sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw== but got sha1-Pot0AriNIsNCPhN6FXeIOxX/hpo=. (68954 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ== integrity checksum failed when using sha512: wanted sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ== but got sha1-No8lEtefnUb9/HE0mueHi7weuVw=. (25587 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== integrity checksum failed when using sha512: wanted sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== but got sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=. (11423 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw== integrity checksum failed when using sha512: wanted sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw== but got sha1-MoK3E/s62A7eDp/PRhG1qm/AM/Q=. (1830818 bytes)
WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.

> [email protected] install /Users/netweb/dev/stylelint/stylelint/node_modules/node-zopfli
> node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(403): https://node-zopfli.s3.amazonaws.com/Release/zopfli-v2.0.2-node-v57-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v57 ABI) (falling back to source compile with node-gyp) 
  CXX(target) Release/obj.target/zopfli/src/zopfli-binding.o
  CXX(target) Release/obj.target/zopfli/src/png/zopflipng.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/blocksplitter.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/cache.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/deflate.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/gzip_container.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/hash.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/katajainen.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/lz77.o
In file included from ../zopfli/src/zopfli/lz77.c:21:
../zopfli/src/zopfli/symbols.h:38:12: warning: unused function 'ZopfliGetDistExtraBits' [-Wunused-function]
static int ZopfliGetDistExtraBits(int dist) {
           ^
../zopfli/src/zopfli/symbols.h:61:12: warning: unused function 'ZopfliGetDistExtraBitsValue' [-Wunused-function]
static int ZopfliGetDistExtraBitsValue(int dist) {
           ^
../zopfli/src/zopfli/symbols.h:138:12: warning: unused function 'ZopfliGetLengthExtraBits' [-Wunused-function]
static int ZopfliGetLengthExtraBits(int l) {
           ^
../zopfli/src/zopfli/symbols.h:161:12: warning: unused function 'ZopfliGetLengthExtraBitsValue' [-Wunused-function]
static int ZopfliGetLengthExtraBitsValue(int l) {
           ^
../zopfli/src/zopfli/symbols.h:222:12: warning: unused function 'ZopfliGetLengthSymbolExtraBits' [-Wunused-function]
static int ZopfliGetLengthSymbolExtraBits(int s) {
           ^
../zopfli/src/zopfli/symbols.h:231:12: warning: unused function 'ZopfliGetDistSymbolExtraBits' [-Wunused-function]
static int ZopfliGetDistSymbolExtraBits(int s) {
           ^
6 warnings generated.
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/squeeze.o
In file included from ../zopfli/src/zopfli/squeeze.c:28:
../zopfli/src/zopfli/symbols.h:61:12: warning: unused function 'ZopfliGetDistExtraBitsValue' [-Wunused-function]
static int ZopfliGetDistExtraBitsValue(int dist) {
           ^
../zopfli/src/zopfli/symbols.h:161:12: warning: unused function 'ZopfliGetLengthExtraBitsValue' [-Wunused-function]
static int ZopfliGetLengthExtraBitsValue(int l) {
           ^
../zopfli/src/zopfli/symbols.h:222:12: warning: unused function 'ZopfliGetLengthSymbolExtraBits' [-Wunused-function]
static int ZopfliGetLengthSymbolExtraBits(int s) {
           ^
../zopfli/src/zopfli/symbols.h:231:12: warning: unused function 'ZopfliGetDistSymbolExtraBits' [-Wunused-function]
static int ZopfliGetDistSymbolExtraBits(int s) {
           ^
4 warnings generated.
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/tree.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/util.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/zlib_container.o
  CC(target) Release/obj.target/zopfli/zopfli/src/zopfli/zopfli_lib.o
  CXX(target) Release/obj.target/zopfli/zopfli/src/zopflipng/zopflipng_lib.o
  CXX(target) Release/obj.target/zopfli/zopfli/src/zopflipng/lodepng/lodepng.o
  CXX(target) Release/obj.target/zopfli/zopfli/src/zopflipng/lodepng/lodepng_util.o
  SOLINK_MODULE(target) Release/zopfli.node
  COPY /Users/netweb/dev/stylelint/stylelint/node_modules/node-zopfli/lib/binding/node-v57-darwin-x64/zopfli.node
  TOUCH Release/obj.target/action_after_build.stamp

> [email protected] install /Users/netweb/dev/stylelint/stylelint/node_modules/remark-cli/node_modules/fsevents
> node install

[fsevents] Success: "/Users/netweb/dev/stylelint/stylelint/node_modules/remark-cli/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> fsevents@https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz install /Users/netweb/dev/stylelint/stylelint/node_modules/fsevents
> node install

node-pre-gyp ERR! install error 
node-pre-gyp ERR! stack TypeError: Cannot read property 'version' of null
node-pre-gyp ERR! stack     at Object.module.exports.evaluate (/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/versioning.js:270:32)
node-pre-gyp ERR! stack     at install (/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/node-pre-gyp/lib/install.js:165:31)
node-pre-gyp ERR! stack     at Object.self.commands.(anonymous function) [as install] (/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/node-pre-gyp/lib/node-pre-gyp.js:50:37)
node-pre-gyp ERR! stack     at run (/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp:79:30)
node-pre-gyp ERR! stack     at Object.<anonymous> (/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp:131:1)
node-pre-gyp ERR! stack     at Module._compile (module.js:569:30)
node-pre-gyp ERR! stack     at Object.Module._extensions..js (module.js:580:10)
node-pre-gyp ERR! stack     at Module.load (module.js:503:32)
node-pre-gyp ERR! stack     at tryModuleLoad (module.js:466:12)
node-pre-gyp ERR! stack     at Function.Module._load (module.js:458:3)
node-pre-gyp ERR! System Darwin 16.6.0
node-pre-gyp ERR! command "/Users/netweb/.nvm/versions/node/v8.1.3/bin/node" "/Users/netweb/dev/stylelint/stylelint/node_modules/fsevents/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/netweb/dev/stylelint/stylelint/node_modules/fsevents
node-pre-gyp ERR! node -v v8.1.3
node-pre-gyp ERR! node-pre-gyp -v v0.6.36
node-pre-gyp ERR! not ok 
Cannot read property 'version' of null

> [email protected] postinstall /Users/netweb/dev/stylelint/stylelint/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

added 1745 packages in 32.491s

Update webpack to v4 for .mjs support

Packages should publish .mjs (ESM) files sibling to .js (CJS) files and use extensionless imports to support both Node.js native modules and traditional CJS environments. I'm already using .mjs in 4+ packages and use native modules for a few APIs.

Webpack v4 beta supports .mjs while v3 has a lot of issues; namely it resolves .js instead of .mjs for extensionless imports. This stuffs up tree-shaking and incorrectly results in almost identical size-limit results for .mjs and .js entries.

The latest webpack release is v4.0.0-beta.2. According to this tweet, v4 will ship at least a month after the first release candidate. This could be months away; I don't think waiting for a "stable" release is worth delaying an update.

--why and custom webpack config

We need a docs with Webpack Bundle Analyzer or hack in index.js to add plugin automatically.

Support standard cosmiconfig file names

At the moment size-limit does not support standard cosmiconfig file names:

https://github.com/ai/size-limit/blob/0.22.0/cli.js#L188

.sizelimitrc.json or .size-limitrc.json, or even .size-limit.json would be nicer than .size-limit, because editors could tell the file is JSON for syntax highlighting and Prettier formatting. Compare a .size-limit file opened next to a .lintstagedrc.json file in VS Code:

I've recently changed my mind about including all config in package.json (as it bloats the published file). Of the ~6 config files I just created in a project for various tools size-limit was the only one I had to look up the documentation to work out the right filename.

Supporting standard cosmiconfig file names doesn't have to be a breaking change; .size-limit could remain an option.

v15.0 regression

I have noticed the following regression upgrading size-limit:

v0.14.1

v0.15.0

It could be linked to my configuration. The beginning of the rabbit hole 🐰:

.size-limit

  {
    "name": "The initial cost people pay for using one component",
    "path": "test/size/overhead.js",
    "limit": "25.0 KB"
  },

test/size/overhead.js

import '../../build/Paper';

../../build/Paper/index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _Paper = require('./Paper');

Object.defineProperty(exports, 'default', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Paper).default;
  }
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Any idea?

size difference on Windows / failing unit test

https://ci.appveyor.com/project/ai/size-limit/build/1.0.198

It happened after the latest dependency updates.

See ac93960

Size of CSS is calculated wrong when `webpack` option is `true`

Hey guys,

I'm not sure that it's a bug, and now I'm here just to ask.

When I create an empty project:

{
  "name": "test",
  "devDependencies": {
    "size-limit": "^0.21.1"
  },
  "size-limit": [
    {
      "path": "file.css",
      "limit": "5 KB"
    }
  ]
}

and add there an empty CSS file:

$ ls -la file.css
-rw-r--r--  1 user  group  0 Mar 28 13:50 file.css

and then run size-limit I get this:

Package size: 2.27 KB
Size limit:   5 KB
With all dependencies, minified and gzipped

As I understand the root of the problem is webpack's config and loaders that size-limit uses for calculating the size. When I disable webpack adding webpack: false to package.json, everything is fine:

Package size: 0 B
Size limit:   5 KB
With all dependencies, minified and gzipped

But I'm not sure that it's a right way to calculate size. I mean, as far as I understand, README says that:

Webpack inside Size Limit is very useful for small open source library. But if you want to use Size Limit for application, not open source library, you could already have webpack to make bundle.

In this case you can disable internal webpack.

So, technically, I started to create a library, but without webpack. And according to README my option is to use default value (webpack: true). Am I wrong?

Anyway, I don't think that was a right output for an empty file.

If gzip and webpack are turned off, CLI still reports gzipping

I tried a configuration which sets the gzip and webpack options to false, but the CLI still reports this at the end of the build message: With all dependencies, minified and gzipped. This message should change if gzip is turned off or if webpack mode is turned off. Other than that, this project works great! Thanks so much for your work on it.

Use `main` field as default `path`

Instead of need to set the path where size-limit will start to process files, use the package.json file main field (if missing, it's default value index.js) as default value to be used. I think it can be a good sane default and don't require to config size-limit, or maybe also to install it globally and just do some checking in random modules without need to modify them to add the config entry...

Running `size-limit --version` returns undefined

Steps to reproduce:

1. Install size-limit as a devDep.
2. Run $(npm bin)/size-limt --version or create an npm script in package.json.
3. Run $(npm bin)/size-limt -v alias (or npm script)

Actual results:

$ npm run size:version

> [email protected] size:version /Users/pdehaan/dev/github/mozilla/something-awesome
> size-limit --version

undefined

Oddly, calling size-limit -v alias fails with a hard error:

$ npm run size:v

> [email protected] size:v /Users/pdehaan/dev/github/mozilla/something-awesome
> size-limit -v

/Users/pdehaan/dev/github/mozilla/something-awesome/node_modules/size-limit/cli.js:27
  .alias('help', 'h')
   ^

TypeError: yargs.usage(...).option(...).option(...).version(...).help(...).alias is not a function
    at Object.<anonymous> (/Users/pdehaan/dev/github/mozilla/something-awesome/node_modules/size-limit/cli.js:27:4)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] size:v: `size-limit -v`
npm ERR! Exit status 1

TypeScript support

Does size-limit support TypeScript?

.size-limit

[
  {
    path: "assets/main.ts",
    webpack: false,
  }
]

npm run size-limit

Package size: 357 B
With all dependencies, minified and gzipped

Would be awesome to have this support TypeScript if possible.

How to use this with frameworks built with webpack like create-react-app?

I tried to use this library with a project built with create-react-app. There's no folder where they put the webpack bundle.js. So I tried to build the project and run size-limit on the resulting bundle. This gave the size of the bundle. But when I tried to see why it was unable to separate the packages. Just showed only the app bundle:

It would be great if you can add support for these special scripts too. 😃

Support a description key.

The .size-limit file on Material-UI side is growing. I have started adding description information so external contributors can better understand why their build is failing.

This is a suggestion, I'm not 100% convinced it's a good idea. Here it is.
What do you think of displaying the description in the output of the CLI?

Any way to use `output.path` for `path` option from webpack config with `webpack: false`?

I have different output paths for different environments. Something like

// webpack.config.js
const config = require('config');

module.exports = {
  output: config.path.dist
};

As far as I can see, there is no way to specify path for size-limit like that. Neither in package.json nor in .size-limit.

There is a way to use size-limit's cli tool, but limit option has been deprecated.

const { exec } = require('child_process');
const config = require('config');

// Dumb example
exec(`npm run size-limit -- --no-webpack 200KB  ${config.path.dist}/app.*.js`);
exec(`npm run size-limit -- --no-webpack 220KB  ${config.path.dist}/vendor.*.js`);

So. Any way to use output.path for path option from the webpack config with webpack: false?

Supporting custom webpack.config.js

Interested in using your project, but the projects in which we would be using it do not build using the webpack config included in index.js.

Would you be interested in a PR that allows for a custom webpack config file path to be provided?

e.g.

size-limit --config ./webpack.config.js

The webpack.config.js file would be expected to:

• Export a single webpack config object
• Not include any compression or minification plugins

... thoughts?

Unexpected character '@' (from UglifyJs)

Look like it's time to deprecate UglifyJs and move to https://github.com/terser-js/terser

It's easy to reproduce the problem - just ignore @babel/runtime in .size-limit

[
  {
    path: "dist/es2015/index.js",
    limit: "5 KB",
    ignore: ["prop-types","@babel/runtime"]
  }
]

Stripping out non production code

Maybe this feature already exists and I am not aware but it would be great to be able to strip the non production code (NODE_ENV != "production" or anything like that). As an example, the React library is wildely using thing and it would be a shame to include invariant and stuff like that within the bundle size.

What do you think about that?

By the way, awesome plugin I love it

Why doesn't it use itself to check its bundle size?

Great project!
It would be really meta if this package would check its own size. Would that make sense?

Option to ignore lazy loaded code

It would be interesting to know the initial load size as well.

Would it be possible to skip the file sizes of dynamic imports (e.g. skip demoLibrary in onClick=async() => await import('demoLibrary').doSth)?

Add support of dynamic output filename

For example, the following config will produce wrong size information.

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // it's a dynamic filename
  },

Based on webpack document output filename could be a

• [hash]
  The hash of the module identifier
• [chunkhash]
  The hash of the chunk content
• [name]
  The module name
• [id]
  The module identifier
• [query]
  The module query, i.e., the string following ? in the filename
• [function]
  The function, which can return filename [string]

My .size-limit.js config:

module.exports = [
  {
    path: "./src/index.jsx",
    config: "./webpack.config.js",
    limit: "500 KB",
  }
]

I know I can set webpack: false in size-limit config to calculate size based on the emitted files, but it would be great to build this feature into size-limit, I suppose it also paves the way for supporting multiple entry points.

Seems to fail on Windows / AppVeyor

I have installed size-limit in one of my packages to watch the sizes during CI testing which is pretty useful. Unfortunately just calling size-limit on AppVeyor - the typical Windows CI - crashes. Unfortunately not a lot of details are shown.

Log is available here:
https://ci.appveyor.com/project/swernerx/edge-core/build/109/job/ulwvqk1xdwfr5y0x

I figure it would be useful to add CI testing with AppVeyor to Size-Limit as well. Hopefully someone has an idea of the reasons behind the failure.

Support for disabling gzip

I build web apps for a slightly odd environment (game UIs) and while I care about bundle size we don't gzip any of our assets. They're compressed as part of the entire game data so it just doesn't make much sense.

Since our bundles won't be gzipped when shipped to consumers it means that the current checking that size-limit does is a little odd. Would it be possible to get an option to disable the gzip before doing the size comparison?

SyntaxError: Unexpected identifier (in size-limit/node_modules/read-pkg-up/index.js:6)

Perhaps regression on v1

> @ size /builds/my-project
> size-limit

/builds/my-project/node_modules/size-limit/node_modules/read-pkg-up/index.js:6
module.exports = async options => {
                       ^^^^^^^
SyntaxError: Unexpected identifier
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:528:28)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/builds/my-project/node_modules/size-limit/cli.js:14:15)
    at Module._compile (module.js:556:32)

Idea: .size-limit config file

Instead of: Add size-limit section to package.json and size script:

This lib could have it's own dotfile .size-limit for configuration info

Unknown browser query > 1% in alt-EU error

Get the error Unknown browser query > 1% in alt-EU error with:

{
  "scripts": {
    "lint:size": "size-limit"
  },
  "size-limit": [
    {
      "path": "./../../public/website/build/js/main.js",
      "limit": "42 KB"
    },
    {
      "path": "./../../public/website/build/css/main.css",
      "limit": "5 KB"
    }
  ],
  "devDependencies": {
    "size-limit": "^0.21.0"
  },
  "browserslist": [
    "> 1% in alt-EU",
    "last 2 versions"
  ]
}

Whole Error

ERROR in /public/website/build/css/main.css (/node_modules/css-loader??ref--5-1!/public/website/build/css/main.css) Module build failed (from /node_modules/css-loader/index.js): BrowserslistError: Unknown browser query `> 1% in alt-EU` at error (/node_modules/caniuse-api/node_modules/browserslist/index.js:37:11) at /node_modules/caniuse-api/node_modules/browserslist/index.js:222:9 at Array.forEach () at browserslist (/node_modules/caniuse-api/node_modules/browserslist/index.js:196:13) at cleanBrowsersList (/node_modules/caniuse-api/dist/utils.js:56:59) at setBrowserScope (/node_modules/caniuse-api/dist/index.js:29:43) at Object. (/node_modules/caniuse-api/dist/index.js:91:1) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object. (/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:7:19) at Module._compile (module.js:652:30) @ /public/website/build/css/main.css 2:14-92 @ multi /public/website/build/css/main.css at runWebpack.then.stats (/assets/website/node_modules/size-limit/index.js:220:15) at error Command failed with exit code 1.

[feature request] RegExp support for `ignore` option

use case - I'd like to ignore all of those at once:

import _extends from '@babel/runtime/helpers/esm/extends';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';

yarn errors out in node 4

Due to engines being set to >= 6.11.5: https://github.com/ai/size-limit/blob/master/package.json#L59-L61

Can we use glob for path?

Hi,
Thanks for the library. I just wanted to confirm whether we can use glob for path?

how to use with react-starter package?

There are starter packages like https://github.com/MacKentoch/react-bootstrap-webpack-starter

It is not clear what to put into size-limit configuration, because this project has reference to non-existing file:
https://github.com/MacKentoch/react-bootstrap-webpack-starter/blob/master/package.json#L5

Can you give a hint: how to configure size-limit for such project?

Bundle error when using peerDependencies and devDependencies

I spent an entire day and a half just trying to work out why size-limit was erroring 😥

It turns out, with this setup…

index.mjs:

export { extractFiles } from 'extract-files'

package.json:

{
  "dependencies": {
    "extract-files": "^5.0.0",
  },
  "devDependencies": {
    "size-limit": "^0.21.1"
  },
  "scripts": {
    "size": "size-limit"
  },
  "size-limit": [
    {
      "path": "index.mjs",
      "limit": "5 KB"
    }
  ]
}

npm run size works ok.

But if you change package.json to this:

{
  "peerDependencies": {
    "extract-files": "^5.0.0"
  },
  "devDependencies": {
    "extract-files": "^5.0.0",
    "size-limit": "^0.21.1"
  },
  "scripts": {
    "size": "size-limit"
  },
  "size-limit": [
    {
      "path": "index.mjs",
      "limit": "5 KB"
    }
  ]
}

You get this error:

 ERROR  Error:
ERROR in ./index.mjs 1:0-44
Can't reexport the named export 'extractFiles' from non EcmaScript module (only default export is available)
 @ multi ./index.mjs
    at runWebpack.then.stats ([redacted]/node_modules/size-limit/index.js:214:15)

I suspect it might have something to do with peer dependencies being ignored:

https://github.com/ai/size-limit/blob/0.21.1/cli.js#L279

webpack `resolve` option doesn't work

Is resolve option supposed to work? I can create a reproduce if it's necessary.

ERROR  Size Limit can't resolve
App/dumb
in src/Root/App/Content

My package-json config:

...
   "size-limit": [
     {
       "path": "src/index.js",
       "config": "webpack-config/app.js"
     }
  ],
...

My webpack config:

...
  resolve: {
    alias: {
      App: path.resolve(root, 'src', 'Root', 'App'),
    },
  },
...

Size-limit exits with non-zero if sizes are equal to reported

Steps to reproduce:

1. Create a config and run size-limit to see the report
2. Update the config with the exact same number from the report
3. Run size-limit again and see it failing with

  Package has exceeded the size limit
  Package size: 1.8 KB
  Size limit:   1.8 KB
  With all dependencies, minified and gzipped

Vue-cli: size-limit error on build

I am using vue-cli to generate the project front-end.

In my scripts to create production bundle I need to execute: yarn build.

This works and my dist folder has 9.7 Mega of size, I tried to use the size-limit but not works, show me this error:

Size Limit can't resolve
        ./App

I am working using Vue components (.vue files).

Improve NPX Support / Passing Config Options via CLI

Hey I discovered both this project and npx today thanks to your blog-post introducing size-limit. One immediate drawback that stood out to me from the documentation and a cursory glance at the source code, and that was the lack of ability to pass config options via the CLI.

It would be nice if I could just run npx size-limit -p "./src/index.js" --why and thanks to the magic of npx I can quickly see how bloated my project is without having to modify my project in any way. I think going forward this would also be an excellent way to get people to try it out, just for how friction-less it is.

This would go along great with #16 as well. I recently tried running size-limit on a project written in typescript, and obviously that's not going to work out of the box, especially when the webpack config for the project wasn't in the root directory.

Thanks for putting this out there! I'd make a PR for this change, but as a front-end dev I'm not very familiar with the ins and outs of writing node.js CLI scripts.

Errors when trying to call `size-limit -h` or `size-limit --help`

Steps to reproduce:

1. Install size-limit as devDep.
2. Run $(npm bin)/size-limit --help or create an npm script in package.json that calls size-limit --help.

Actual results:

$ npm run size:help

> [email protected] size:help /Users/pdehaan/dev/github/mozilla/something-awesome
> size-limit --help

/Users/pdehaan/dev/github/mozilla/something-awesome/node_modules/size-limit/cli.js:27
  .alias('help', 'h')
   ^

TypeError: yargs.usage(...).option(...).option(...).version(...).help(...).alias is not a function
    at Object.<anonymous> (/Users/pdehaan/dev/github/mozilla/something-awesome/node_modules/size-limit/cli.js:27:4)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] size:help: `size-limit --help`
npm ERR! Exit status 1

Support code-splitting

My bundle gets split into something like 26 chunks, but when I run size-limit it only tells me the size of the entry chunk.

`ignore` option breaks Webpack builds

If you use the ignore option for a dependency that is imported in the file you are testing the size of, you get a Webpack build error like this:

Also, without using the ignore option, if your dependency is a peerDependency and devDependency, but not a dependency, the same error happens. I assume the buggy mechanism for the ignore option is being repurposed to exclude peerDependency sizes from the report?

Document babili option in README

I was getting errors on the 2-3 repos I tried this with, until I started trolling the existing projects using the library and seeing the Boolean babili option.

Awesome project, by the way! 💯

Output --why webpack build for CI purposes

Hello,

As a user of CircleCI (or any other CI system), I would like to be able to store the output of the --why functionality in my build artifacts. This would allow me to use size limit to visually see what changed between builds, something that becomes rather complex over a large amount of commits.

If this is something that is possible I'd love to contribute.

Cheers,
Jeffrey

Clarify path option

Which version should I specify in the path option: source code or a compiled one (the same I have in the main field of package.json)?

Support multiple entry points

I my project we have multiple entry points configured with https://webpack.js.org/configuration/output/#output-filename

but when running size-limit, getting following issues:

ERROR  TypeError: Cannot read property 'size' of undefined
    at runWebpack.then.stats (/node_modules/size-limit/index.js:166:53)

because

let name = `${ stats.compilation.outputOptions.filename }` // filename template, before replaced placeholder https://webpack.js.org/configuration/output/#output-filename
      name += opts.config ? '' : '.gz'
      const assets = stats.toJson().assets

      const size = assets.find(i => i.name === name).size

Using with generated bundle name

How can I use size-limit if I have bundle name like bundle.b42f2f4b487ca5efc1f4.js?