GithubHelp home page GithubHelp logo

package-size's Introduction

package-size

NPM version NPM downloads Build Status donate

preview

How does this work?

  1. Install the packages with yarn or npm in a temp directory
  2. Bundle the packages with webpack and get the bundle size
  3. Show you the bundle size and cache it by package version

Install

yarn global add package-size

Usage

The package is bundled with Webpack.

# get the size of vue bundle
package-size vue

# get the size of react+react-dom bundle
package-size react,react-dom

# get the size of vue react+react-dom preact bundles
package-size vue react,react-dom preact

# get the size of react+react-dom without using the cache
package-size react,react-dom --no-cache

# get the size of file in current working directory
package-size ./dist/index.js
# or a package in current working directory, explictly using `--cwd` flag
package-size vue --cwd

# or event multiple versions for the same package!
package-size [email protected] [email protected] react@15

# save results to file system in JSON format
# defaults to ./package-size-output.json
package-size cherow --output
# or custom path
package-size cherow --output stats.json

# analyze bundle with webpack-bundle-analyzer
package-size cherow --analyze
# analyze bundle with webpack-bundle-analyzer on a different port
package-size cherow --analyze --port 9000

API

const getSizes = require('package-size')

getSizes('react,react-dom', options)
  .then(data => {
    console.log(data)
    //=>
    {
      name: 'react,react-dom',
      size: 12023, // in bytes
      minified: 2342,
      gzipped: 534,
      versionedName: '[email protected],[email protected]'
    }
  })

options

sort

Type: boolean
Default: false

Sort packages in size (from small to large).

cwd

Type: boolean
Default: false

Resolve modules in current working directory instead of a cache folder. Relative path will set cwd to true by default.

externals

Type: string or Array<string|RegExp>
Default: undefined

The package to exclude from bundled file, for example, to get the bundle size of styled-jsx/style we need to exclude react:

package-size styled-jsx/style --externals react

Note that if some item in externals is provided as string, it will be wrapped in a regular expression. For example: react is treated as /^react$/

cache

Type: boolean
Default: true

If cache is set to false, then package-size will not use cached build sizes. To use this from the CLI, pass --no-cache as an argument.

target

Type: string
Default: browser Values: browser node

Build target. In node target, all node_modules will be excluded and output format is set to CommonJS.

registry

Type: string
Default: undefined

npm registry to install the package from. By default it uses the default npm registry.

resolve

Type: string string[]
Default: undefined

Extra folders to resolve local node_modules from.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

package-size © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

egoist.moe · GitHub @egoist · Twitter @_egoistlily

package-size's People

Contributors

egoist avatar hipstersmoothie avatar wgoodall01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

package-size's Issues

Support for missing dependencies

This module is awesome, but it kept crashing on some libs i've tried, usually Module not found: Error: Can't resolve '...'

❯ package-size preact-compat       

  package        size  minified  minified+gzipped
  preact-compat  ...   ...       ...


 ERROR  Compiled with errors!

Error: 
ERROR in /private/var/folders/n6/2ys_sbln60d7hlwngzqzs_p80000gn/T/package-size-lwt529m5lmpylqjbutyb9/~/preact-compat/dist/preact-compat.es.js
Module not found: Error: Can't resolve 'preact' in '/private/var/folders/n6/2ys_sbln60d7hlwngzqzs_p80000gn/T/package-size-lwt529m5lmpylqjbutyb9/node_modules/preact-compat/dist'
 @ /private/var/folders/n6/2ys_sbln60d7hlwngzqzs_p80000gn/T/package-size-lwt529m5lmpylqjbutyb9/~/preact-compat/dist/preact-compat.es.js 2:0-69
 @ multi preact-compat
    at /usr/local/lib/node_modules/package-size/lib/index.js:114:11
    at Generator.next (<anonymous>)
    at onFulfilled (/usr/local/lib/node_modules/package-size/node_modules/co/index.js:65:19)

What is the size of package-size?

This may sound silly, but I’m on cell data and I’d like to know the size of the package-size repository before I use it! 😂 (If I missed it somewhere in the repository, sorry about that)

Web Interface

Do you have a web interface for package-size?

I have a similar tool called Package Phobia which shows a single package's history over time.

There's also Bundle Phobia which shows the bundle size over time.

However I haven't added any comparison views yet.

Add support for registry

Many modules are behind in the internal network.
So please support registry setting while npm install.

Enable Dependabot

Hello, it would be nice to have Dependabot enabled for this project. It informs you about security updates and etc.

Thank you for this library!

Optionally bundle the package

I think we should not bundle the package by default using webpack, it would be nice to show the install size of a package by default and optionally show bundle size when there's --bundle flag.

Add support for ES6 packages

UglifyJS isn't ES6+ compatible, for example:

$ package-size zooming

ERROR in zooming.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [zooming.js:86,30]

A possible solution would be using babili

bug: unable to get size of local file

I wanna check library bundle size:

Libary output:

image

yarn package-size ./dist/bundles/index.esm.js

🚨 throws error:

 ERROR  Compiled with errors!

TypeError: Cannot read property 'version' of undefined
    at info.versionedName.parsed.map.pkg (/Users/hotell/Projects/devel/github/@hotell/typescript-lib-starter/node_modules/package-size/lib/index.js:243:81)
    at Array.map (<anonymous>)
    at /Users/hotell/Projects/devel/github/@hotell/typescript-lib-starter/node_modules/package-size/lib/index.js:241:8
    at Generator.next (<anonymous>)
    at onFulfilled (/Users/hotell/Projects/devel/github/@hotell/typescript-lib-starter/node_modules/co/index.js:65:19)
    at <anonymous>

Critical dependency: the request of a dependency is an expression

❯ package-size mocha

  package  size  minified  minified+gzipped
  mocha    ...   ...       ...


 ERROR  Compiled with errors!

Error: 
WARNING in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
153:20-37 Critical dependency: the request of a dependency is an expression

WARNING in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
185:17-30 Critical dependency: the request of a dependency is an expression

WARNING in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
222:26-39 Critical dependency: the request of a dependency is an expression

ERROR in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/growl/lib/growl.js
Module not found: Error: Can't resolve 'child_process' in '/private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/node_modules/growl/lib'
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/growl/lib/growl.js 7:11-35
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/growl/lib/growl.js
Module not found: Error: Can't resolve 'fs' in '/private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/node_modules/growl/lib'
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/growl/lib/growl.js 8:9-22
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/buffer/index.js
Module not found: Error: Can't resolve 'base64-js' in '/Users/zeke/.config/yarn/global/node_modules/buffer'
 @ /Users/zeke/.config/yarn/global/~/buffer/index.js 11:13-33
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/utils.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/buffer/index.js
Module not found: Error: Can't resolve 'ieee754' in '/Users/zeke/.config/yarn/global/node_modules/buffer'
 @ /Users/zeke/.config/yarn/global/~/buffer/index.js 12:14-32
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/utils.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/buffer/index.js
Module not found: Error: Can't resolve 'isarray' in '/Users/zeke/.config/yarn/global/node_modules/buffer'
 @ /Users/zeke/.config/yarn/global/~/buffer/index.js 13:14-32
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/utils.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/stream-browserify/index.js
Module not found: Error: Can't resolve 'readable-stream/readable.js' in '/Users/zeke/.config/yarn/global/node_modules/stream-browserify'
 @ /Users/zeke/.config/yarn/global/~/stream-browserify/index.js 28:18-56
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/browser-stdout/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/stream-browserify/index.js
Module not found: Error: Can't resolve 'readable-stream/writable.js' in '/Users/zeke/.config/yarn/global/node_modules/stream-browserify'
 @ /Users/zeke/.config/yarn/global/~/stream-browserify/index.js 29:18-56
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/browser-stdout/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/stream-browserify/index.js
Module not found: Error: Can't resolve 'readable-stream/duplex.js' in '/Users/zeke/.config/yarn/global/node_modules/stream-browserify'
 @ /Users/zeke/.config/yarn/global/~/stream-browserify/index.js 30:16-52
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/browser-stdout/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/stream-browserify/index.js
Module not found: Error: Can't resolve 'readable-stream/transform.js' in '/Users/zeke/.config/yarn/global/node_modules/stream-browserify'
 @ /Users/zeke/.config/yarn/global/~/stream-browserify/index.js 31:19-58
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/browser-stdout/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /Users/zeke/.config/yarn/global/~/stream-browserify/index.js
Module not found: Error: Can't resolve 'readable-stream/passthrough.js' in '/Users/zeke/.config/yarn/global/node_modules/stream-browserify'
 @ /Users/zeke/.config/yarn/global/~/stream-browserify/index.js 32:21-62
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/browser-stdout/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha

ERROR in /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mkdirp/index.js
Module not found: Error: Can't resolve 'fs' in '/private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/node_modules/mkdirp'
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mkdirp/index.js 2:9-22
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/reporters/xunit.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/reporters/index.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/lib/mocha.js
 @ /private/var/folders/nj/9554mvgj07xdh61jbyhkbtq80000gn/T/package-size-jy2zbwpuhoh3yccv7vi/~/mocha/browser-entry.js
 @ multi mocha
    at /Users/zeke/.config/yarn/global/node_modules/package-size/lib/index.js:114:11
    at next (native)
    at onFulfilled (/Users/zeke/.config/yarn/global/node_modules/co/index.js:65:19)

Suggestion: output option

Would be nice to have a output option to export the results in JSON format:
package-size react --output=./package-sizes.json

Incorrect sizes?

Not sure what's happening here:
Running: npx package-size wreck got, outputs:

  package       size     minified  gzipped
  [email protected]  1.16 MB  429 kB    137 kB
  [email protected]     410 kB   139 kB    43.8 kB

Looking at the output wreck looks huge. However if I locally install both tools and inspect the total size of node_modules I get this:

  package       size
  [email protected]  111 kB
  [email protected]     581 kB

I understand that package-size doesn't look at the modules size but instead the bundle size still these results don't make sense right? How can the bundled size be 10 times bigger than the source?

Cache same package

Cache the size of package and reuse if at next time, maybe add a --use-cache or --max-age option

cwd flag errors - "Cannot read property 'version' of undefined"

I'm trying to use the cwd flag to get the package size on a few packages in my working directory. It appears to be pulling from cache because it always returns the same information no matter the package name I pass to it. So when I use the no cache flag I then get the "version is undefined" error.

Package bundle size calculation is incorrect

The size of package bundle is incorrectly calculated.

For example, notice below how react + react-dom is larger than react + react-dom + react-transition-group.

C:\>package-size react react-dom react-transition-group react,react-dom react,react-dom,react-transition-group

  package                                                     size       minified   gzipped
  [email protected]                                                66.53 KB   7.1 KB     2.77 KB
  [email protected]                                            722.68 KB  101.9 KB   32.54 KB
  [email protected]                                94.89 KB   17.9 KB    4.79 KB
  [email protected],[email protected]                               722.83 KB  101.91 KB  32.54 KB
  [email protected],[email protected],[email protected]  95.25 KB   17.91 KB   4.79 KB

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.