pastelsky / bundlephobia

🏋️ Find out the cost of adding a new frontend dependency to your project

bundlephobia.com

Know the performance impact of including an npm package in your app's bundle.

Bundlephobia's looking for contributors and co-maintainers

Features

• Works with ES6 packages
• Can build css and scss packages as well (beta)
• Reports historical trends
• See package composition

Badges

• badgen.net - example size of react:
• shields.io - example size of react:

Built using bundlephobia

• Size in browser - As seen on package searches at yarnpkg.com
• bundlephobia-cli - A Command Line client for bundlephobia
• importcost - An Atom plugin to display size of imported packages
• JS Bundle Size Cross-Browser Extension - Chrome and Firefox extension automatically adding package size to the github and npm pages.
• npmcharts.com - bundle size stats at top of page
• Rollpkg - A build tool to create packages with Rollup and TypeScript

Support

Liked bundlephobia? Used it's API to build something cool? Let us know!

We could use some 💛 and sponsorship on –

FAQ

1. Why does search for package X throw MissingDependencyError ?

This error is thrown if a package requires a dependency without adding it in its dependencies or peerDependencies list. In the absence of such a definition, we cannot reliably report the size of the package - since we cannot resolve any information about the package.

In such a case, it's best to report an issue with the package author asking the missing package to be added to its package.json

2. I see a BuildError for package X, but I'm not sure why.

You can see a detailed stack trace in your devtools console, and open an issue with the relevant details. Working on a more ideal solution for this.

Contributing

See Contributing

Sponsors

bundlephobia's Issues

Parse package.json

Any thoughts on having it parse an entire package.json file and return the combined results? Perhaps even an API end point to pass in package names directly not using this interface in order to calculate that ourselves?

Can't load vega package

Type

Cannot load package size

Package name

vega

Entire error (stringified) I see in my browser console

{"error":{"code":"BuildError","message":"Failed to build this package.","details":{"name":"BuildError"}}}

Trying to resolve "Missing peer dependencies error" for react-gpt

Background

First, cool project, this has inspired us to add a travis hook to check the bundlesize of our projects and error if it exceeds a certain size: nfl/react-gpt#47

I was trying to see the distribution KB size footprint for react-gpt, and am seeing the "Missing peer dependencies error" here https://bundlephobia.com/[email protected]

I updated the peerDependencies in the project, bumped the version to 0.3.0, but still get the same error here https://bundlephobia.com/[email protected]

Is this a cache issue or have I not resolving the error correctly in the react-gpt project?

Retrigger "saved" build?

On the main UI: https://bundlephobia.com/[email protected]

I triggered the build too early after publishing (mirrors weren't all refreshed?) and it shows the same result than the previous version. I checked later on with another bundle checker and it's definitely much smaller.

I guess now the result is cached and will always show this result for this version?
It would be great to be able to force rebuild from the UI to get the correct size shown.

Page doesn't reload when clicking on package link before prev request completes

Steps to Reproduce

• Search for any package
• Before RESOLVING VERSION AND DEPENDENCIES completes, scroll down and click on any package under Recent Searches
• URL query param gets updated, but the page doesn't reload with the new package

material-design-icons not working

Spinning and spinning and there's a 500 error in console.

Make Badges API

Could you develop a Badges API in order to make it possible to include in README something like this, please?

But with [size|KBs] instead.

prettier build error

Type

Bug 🐛

Package name

prettier

Entire error

BuildError
Failed to build this package.

/tmp/tmp-build/node_modules/prettier/index.js
Module parse failed: Invalid labeled declaration (4045:8)
You may need an appropriate loader to handle this file type.
|     }
|     _token_stack:
|         var lex = function () {
|             var token;
|             token = lexer.lex() || EOF;
@ /tmp/tmp-build/entries/index-prettier.js 1:11-30"

500 when fetching info for semantic-ui

https://bundlephobia.com/result?p=semantic-ui
Not that important for my needs, as I was more curious about semantic-react, but I figured I'd make you aware something is going on here. Anytime I try and check the size for this package, a 500 is returned.

Make Firebase optional

According to the README https://github.com/pastelsky/bundlephobia#optional-steps, Firebase is optional. However, in the code Firebase calls get executed regardless, throwing BuildError.

It's down. Again

Type

Bug

Package name

@apicase/core

Entire error (stringified) I see in my browser console

VM114 result:3 {status: "500", description: "A server error has occurred"}
(anonymous) @ VM114 result:3
Promise.catch (async)
r.fetchHistory @ VM114 result:3
r.handleSearchSubmit @ VM114 result:3
r.handleSubmit @ VM95 app.js:26
r @ VM95 app.js:12
i @ VM95 app.js:12
s @ VM95 app.js:12
d @ VM95 app.js:7
m @ VM95 app.js:7
r @ VM95 app.js:26
processEventQueue @ VM95 app.js:7
r @ VM95 app.js:26
handleTopLevel @ VM95 app.js:26
a @ VM95 app.js:26
perform @ VM95 app.js:7
batchedUpdates @ VM95 app.js:26
a @ VM95 app.js:7
dispatchEvent @ VM95 app.js:26
size Failed to load resource: the server responded with a status of 500 ()
VM114 result:3 Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
    at t.value (VM114 result:3)
    at p._renderValidatedComponentWithoutOwnerOrContext (VM95 app.js:26)
    at p._renderValidatedComponent (VM95 app.js:26)
    at p._updateRenderedComponent (VM95 app.js:26)
    at p._performComponentUpdate (VM95 app.js:26)
    at p.updateComponent (VM95 app.js:26)
    at performUpdateIfNecessary (VM95 app.js:26)
    at Object.performUpdateIfNecessary (VM95 app.js:7)
    at s (VM95 app.js:7)
    at r.perform (VM95 app.js:7)

Heroku: Application Error

Searching for anything creates an application error:

eg. https://bundlephobia.com/[email protected]

feat req: provide badge sevice

write it in Readme

link (npm or github) for the search package ?

Backbone.js info is wrong

min+Gzip backbone js is 7.6 kb
but in bundlephobia.com show a 41.6 kb

BuildError "envelope" package

Type

Bug

Package name

envelope

Entire error (stringified) I see in my browser console

BuildError: Failed to build this package.

(there is not a lot of info available for this error)

Bars incorrectly ordered

Type

Bug / Feature Request

Package name

crizmas-form

I was thinking that the bars were supposed to be ordered based on the version. However, in case of crizmas-form 0.2.4 is before 0.2.3, 0.2.3 is before 0.1.2, 1.0.0 is before 0.2.10, etc. The order is not reversed either, for instance 0.2.2 is before 0.2.4 (which I assume is correct).

Update firebase to the latest version 4.2.0

There is a newer version of firebase released that this project depends on.

Dependency	firebase
Required	^3.7.3
Latest	4.2.0

There might be a bunch of new features, fixes and perf improvements that might help this project.
Please have a look into these changes and try to get onto the latest version of firebase.

Regards!

Bars out of order

When I was testing my own package (Vuebar) I've got a little confused because it seems that the bars were out of order.

This image should show it very clearly:

BTW. This project is awesome 😄

statty

Not sure why I am not able to get the bundle size for

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

webpack-dev-server fails on client-side require

Type

Bug

Package name

webpack-dev-server

Entire error (stringified) I see in my browser console

I took it a bit further, since the API is throwing a 504. https://bundlephobia.com/api/size?package=webpack-dev-server&record=true returns the following raw output:

{
  "error":{
    "code":"MissingDependencyError",
    "message":"This package (or this version) uses `<code>webpack/hot</code>`, but does not specify them<br /> either as a dependency or a peer dependency",
    "details":{
      "name":"MissingDependencyError",
      "originalError":[
        "ModuleNotFoundError: Module not found: Error: Can't resolve 'webpack/hot' in '/tmp/tmp-build/node_modules/webpack-dev-server/client'",
        "Error: minifying bundle.js\nProcessTerminatedError: cancel after 2 retries!"
      ],
      "extra":{
        "missingModules":[
          "webpack/hot"
        ]
      }
    }
  }
}

While some of the code does indeed "require" webpack/hot, it's only in files bundled and served to the client. So it may be that bundlephobia is being overly aggressive in this case.

500 Error on submitting 'Elm'

When trying to calculate the size of 'Elm', app hangs at 'calculating files sizes'. Chrome dev tools shows the below in the console:

app.js:7 GET https://bundlephobia.com/api/size?package=elm&record=true 500 ()
result:3 Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
    at t.value (result:3)
    at p._renderValidatedComponentWithoutOwnerOrContext (app.js:26)
    at p._renderValidatedComponent (app.js:26)
    at p._updateRenderedComponent (app.js:26)
    at p._performComponentUpdate (app.js:26)
    at p.updateComponent (app.js:26)
    at performUpdateIfNecessary (app.js:26)
    at Object.performUpdateIfNecessary (app.js:7)
    at s (app.js:7)
    at r.perform (app.js:7)

Change static file base path

Type

Feature Request

By default, the .next file will be serve as root path, which means files area always requested by example.com/.next/*. For some reason, I need to serve the static file in spec path, such as example.com/custompath/.next/*. How can I do this.

Cannot find scoped packages

Type

Feature Request

Package name

• @devexpress/dx-react-core
• @elemental/link
• @react-spectre/button

Entire error (stringified) I see in my browser console

PackageNotFoundError
The package you were looking for doesn't exist.

Input field doesn't render characters

Hey, just wanted to say thanks for this project, I've been using pretty often.

Although, since the new UI update it doesn't work on chrome (60.0.3) anymore. The input field doesn't render characters like the following gif suggests:

It seems it works on incognito mode though.

Doesn't work for cleave.js

https://github.com/nosir/cleave.js

I checked the package.json and it does have a "main" field, per the error message from the website.

Bundle size is NaN

Type

Bug

Package name

[email protected]

Entire error (stringified) I see in my browser console

So, here it goes

No errors in console

Idenfity if a package has a `sideEffects: false` field in package.json

Type

Feature Request

With webpack v4 around the corner, it would be awesome to denote to users searching for packages if their package (in addition to using the "module" field), also is "sideEffect free". We have package authors (see lodash-es) annotate this using a new field called "sideEffects: false". If this is set, webpack can perform even deeper optimizations to a library using ESM. (Also builds are faster because we skip evaluation of those unused exports).

Bug: Hangs on istanbul, react-icons

Type

Bug

Package name

• istanbul
• react-icons

Entire error (stringified) I see in my browser console

fetch results react-table
/api/package-history?package=react-table Failed to load resource: the server responded with a status of 502 ()
result:3 SyntaxError: Unexpected token < in JSON at position 0
(anonymous) @ result:3
/api/size?package=react-table&record=true Failed to load resource: the server responded with a status of 502 ()
result:3 Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
    at t.value (result:3)
    at p._renderValidatedComponentWithoutOwnerOrContext (app.js:26)
    at p._renderValidatedComponent (app.js:26)
    at p._updateRenderedComponent (app.js:26)
    at p._performComponentUpdate (app.js:26)
    at p.updateComponent (app.js:26)
    at performUpdateIfNecessary (app.js:26)
    at Object.performUpdateIfNecessary (app.js:7)
    at s (app.js:7)
    at r.perform (app.js:7)

Same error for istanbul .

Also the site just went offline.

Show non-bundled size (total size on disk)

Type

Feature Request

Request

Some npm packages are not meant to be bundled, such as test tools like ava or tape.

It would be great if bundlephobia could show the size on disk before bundling.

For example, ava and should show 24 MB but it shows 941 kB minified.

I created an issue in siddharthkp/cost-of-modules#50 since it might be out of scope for bundlephobia.

Can not retrive package info, server response: 502

Type

Can not retrive package info, server response: 502
Tested multiple npm packages, should anyhow return an error code/feedback to user

Package name

bundlephobia

Entire error (stringified) I see in my browser console

stack trace:
Failed to load resource: the server responded with a status of 502 () result:3 Uncaught (in promise) TypeError: Cannot read property 'code' of undefined at t.value (result:3) at p._renderValidatedComponentWithoutOwnerOrContext (app.js:26) at p._renderValidatedComponent (app.js:26) at p._updateRenderedComponent (app.js:26) at p._performComponentUpdate (app.js:26) at p.updateComponent (app.js:26) at performUpdateIfNecessary (app.js:26) at Object.performUpdateIfNecessary (app.js:7) at s (app.js:7) at r.perform (app.js:7) /api/package-history?package=vue-spinner Failed to load resource: the server responded with a status of 502 () result:3 Uncaught (in promise) TypeError: Cannot read property 'code' of undefined at t.value (result:3) at p._renderValidatedComponentWithoutOwnerOrContext (app.js:26) at p._renderValidatedComponent (app.js:26) at p._updateRenderedComponent (app.js:26) at p._performComponentUpdate (app.js:26) at p.updateComponent (app.js:26) at performUpdateIfNecessary (app.js:26) at Object.performUpdateIfNecessary (app.js:7) at s (app.js:7) at r.perform (app.js:7)

Unexplained BuildError

Type

Bug? Latest versions of several of my packages display BuildError, without a useful trace or explanation.

Package name

• https://bundlephobia.com/result?p=extract-files
• https://bundlephobia.com/result?p=apollo-upload-client
• https://bundlephobia.com/result?p=apollo-upload-server

Entire error (stringified) I see in my browser console

Here is the repo for apollo-upload-client: https://github.com/jaydenseric/apollo-upload-client.

Getting only 500 responses

Type: Bug

Getting a 500 whenever I enter a search result. Same with the cli.

Package name

Not related to a particular package, seems to be an issue with zeit

Entire error (stringified) I see in my browser console

bundle-phobia react-router
Error happened: invalid json response body at https://bundlephobia.com/api/size?package=react-router reason: Unexpected token A in JSON at position 0

Doesn't install peer dependencies of dependencies

Type

Bug.

Package name

https://bundlephobia.com/result?p=apollo-upload-client

Entire error (stringified) I see in my browser console

Can't load Meteor

Type

Bug

Package name

Meteor

Entire error (stringified) I see in my browser console

When selecting "meteor" from the search results autocomplete list, loading this page: https://bundlephobia.com/result?p=meteor

• InstallError
  Installing the packaged failed.

• /api/size?package=meteor&record=true Failed to load resource: the server responded with a status of 500 ()

• /api/size?package=meteor&record=true Failed to load resource: the server responded with a status of 524 ()

• Uncaught (in promise) TypeError: Cannot read property 'code' of undefined
  at t.value (result:3)
  at p._renderValidatedComponentWithoutOwnerOrContext (app.js:26)
  at p._renderValidatedComponent (app.js:26)
  at p._updateRenderedComponent (app.js:26)
  at p._performComponentUpdate (app.js:26)
  at p.updateComponent (app.js:26)
  at performUpdateIfNecessary (app.js:26)
  at Object.performUpdateIfNecessary (app.js:7)
  at s (app.js:7)
  at r.perform (app.js:7)

BuildError: Failed to build this package

Type

Bug

Package name

@appbaseio/reactivesearch

Entire error (stringified) I see in my browser console

{code: "BuildError", message: "Failed to build this package.", details: {name: "BuildError"}}

Also, tried with bundle-phobia-cli

TailwindCss

Add support for tailwindcss? Would love to see how good it gets compressed.

Type

TimeoutError
The package took more than 30s to build and was aborted. This can happen if the package is very large and / or if the server is under heavy load.

Package name

TailwindCSS

redux-first-router fails to get parsed and report the size.

@pastelsky, The tool is unable to parse the redux-first-router package. It does consist of the entry point and valid dist. Any pointers as to what is going wrong here?

cc /@faceyspacey

Endless loading for "handsontable" library

Roadmap to a more useable product

Roadmap to 1.0 iff this idea catches on -

• Evaluate using webpack instead of rollup (webpack seems to be more tolerant towards incorrect module exports. For eg. rollup will fail to bundle fail to bundle some popular packages like request) due to duplicate export names.
• Show better looking / more actionable error messages and avoid alert()s
• Implement a better queuing system for bundling is a CPU intensive process and Heroku times out after 30s.
• Evaluate using babili vs. the current UglifyJS harmony minifier. Bundling some packages fail due to usage of ES6/7 syntax unsupported by Uglify JS.
• Make the source code less ugly.
• Better design, maybe?

Better support for Ember addons

Type

Feature Request

It would be awesome if this package had better support for Ember addons. Ember addons only bundle a certain subset of files into a browser package, so measuring all of the JS files in the project is resulting in wrong numbers. As a first step I would propose this solution:

• check if package.json contains an ember-addon "keyword"
• if the keyword was found only files in the app and addon folders are considered for the final browser weight

MissingDependencyError

Type

Hello! for [email protected] bundlephobia correctly threw MissingDependencyError (thanks for that! 🙏 )

I thought I fixed it in [email protected] -- but I'm still getting an error 🤔

Package name

react-tracking

Entire error (stringified) I see in my browser console

{"error":{"code":"MissingDependencyError","message":"This package (or this version) uses `<code>prop-types</code>`, but does not specify them<br /> either as a dependency or a peer dependency","details":{"name":"MissingDependencyError","originalError":["ModuleNotFoundError: Module not found: Error: Can't resolve 'prop-types' in '/tmp/tmp-build/node_modules/react-tracking/build'","ModuleNotFoundError: Module not found: Error: Can't resolve 'prop-types' in '/tmp/tmp-build/node_modules/react-tracking/build'"],"extra":{"missingModules":["prop-types"]}}}}

Force cache clean

Type

Feature Request

About

I often publicate a new versions of my libraries and then I want to check its size but we need to wait a lot of time for it
Can we have no-cache option or force check withour cache if newer version is requested?

Incorrect missing dependency error

Type

Bug: core-js imports placed by @babel/plugin-transform-runtime are considered missing dependency errors, despite @babel/runtime being a dependency, which internally has the core-js dependency.

• extract-files package.json
• @babel/runtime package.json

Package name

https://bundlephobia.com/result?p=extract-files

Entire error (stringified) I see in my browser console

webpack-serve fails on Node v9 built-in dependency

Type

Bug

Package name

webpack-serve

Entire error (stringified) I see in my browser console

I took it one further as the API was throwing a 504. https://bundlephobia.com/api/size?package=webpack-serve&record=true produces:

{
  "error":{
    "code":"MissingDependencyError",
    "message":"This package (or this version) uses `<code>http2</code>`, but does not specify them<br /> either as a dependency or a peer dependency",
    "details":{
      "name":"MissingDependencyError",
      "originalError":[
        "ModuleNotFoundError: Module not found: Error: Can't resolve 'http2' in '/tmp/tmp-build/node_modules/webpack-serve/lib'"
      ],
      "extra":{
        "missingModules":[
          "http2"
        ]
      }
    }
  }
}

This one is fun because http2 is a Node v9+ built-in. So it would suggest that the service platform the site is running on needs a node bump, or needs to be aware of new built-ins. Or this may be another case of the service being too tricky and overly aggressive checking dependencies.

Error running dev server: The opts.token property is missing.

Type

Bug

Package name

le_node

Entire error (stringified) I see in my browser console

bundlephobia/node_modules/le_node/lib/logger.js:176
      throw new _error.BadOptionsError(opts, _text2.default.noToken());
      ^

Error: The opts.token property is missing.

I added the API key from Algolia as instructed in the readme but it seems like this logging service API key is also needed?

Locally I can just modify index.js (or sign up for LogEntries I suppose), i.e.

const log = new Logger({
  token: process.env.LOGENTRIES_TOKEN,
});

but should we just make this optional?

Bundle Phobia appears to be down 😱

Just a friendly heads up 😉.

Also, bundlephobia is awesome.

How does it work?

I tried this for css-constructor which starts with the line

import React from 'react' 😄

Will this include React's weight as cost as well?

(The lib assumes you are using this for a React project)

Does not work with animate.css

It seems npm-cost does not work with pure CSS module?

https://cost-of-modules.herokuapp.com/?p=animate.css

How to run this?

npm-cost reports react-dom@next being larger than react-dom@15 which I don’t believe is correct. I wanted to debug it to see if anything’s confusing Rollup in our bundles.

I tried following the instructions for local development, but I’m stuck here:

I’m pretty sure I’m running Node 8:

What am I doing wrong? Thanks!