ai / size-limit Goto Github PK
View Code? Open in Web Editor NEWCalculate 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.
License: MIT License
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.
License: MIT License
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.
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. 😃
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?
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:
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.
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.
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.
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.
I have noticed the following regression upgrading size-limit:
It could be linked to my configuration. The beginning of the rabbit hole 🐰:
{
"name": "The initial cost people pay for using one component",
"path": "test/size/overhead.js",
"limit": "25.0 KB"
},
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?
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).
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:
webpack
config object... thoughts?
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?
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
Steps to reproduce:
size-limit
to see the reportsize-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
size-limit
as a devDep.$(npm bin)/size-limt --version
or create an npm script in package.json.$(npm bin)/size-limt -v
alias (or npm script)$ 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
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.
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?
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
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]
[chunkhash]
[name]
[id]
[query]
[function]
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.
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
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)?
Hi,
Thanks for the library. I just wanted to confirm whether we can use glob for path?
Due to engines being set to >= 6.11.5: https://github.com/ai/size-limit/blob/master/package.json#L59-L61
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"]
}
]
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?
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
?
Thank you for this util, it is very useful!
When do you plan to make major v1 release?
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.
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?
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
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...
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.
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"
]
}
https://ci.appveyor.com/project/ai/size-limit/build/1.0.198
It happened after the latest dependency updates.
See ac93960
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.
size-limit
as devDep.$(npm bin)/size-limit --help
or create an npm script in package.json that calls size-limit --help
.$ 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
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.
We need a docs with Webpack Bundle Analyzer
or hack in index.js
to add plugin automatically.
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
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?
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! 💯
Great project!
It would be really meta if this package would check its own size. Would that make sense?
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)
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';
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
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.
How can I use size-limit if I have bundle name like bundle.b42f2f4b487ca5efc1f4.js
?
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'),
},
},
...
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.
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
)?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.