npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

weigh

v5.1.0

Published

A command line tool to check the bundle size of any browser compatible npm module

Downloads

99

Readme

Weigh Build Status

A command line tool to check the bundle size of one or more browser compatible npm modules

Install

npm i -g weigh

Usage

Usage: weigh [<args>] <module1> [<module2>] [<moduleN>...]

Supports any module identifier on the format [@scope/]package[@version][/module.js]

  Options:
    --help, -h          Show this usage information

    --bundler -b        Which bundler to use. Can be one of
                          • `browserify` (default)
                          • `concat`

    --minifier, -m      Specify which JavaScript minifier to use. Can be either
                          • `uglify` for UglifyJS (default)
                          • `closure` for Closure Compiler
                          • `babili` for Babili
                          • `butternut` for Butternut

    --verbose, -v       Do a little more logging along the way

    --gzip-level, -g    Gzip compression level

    --no-minify         Don't minify

    --no-gzip           Don't gzip

    --uncompressed, -u  Shorthand for --no-minify --no-gzip

    --env               The value of process.env.NODE_ENV inside the bundle.
                        Defaults to `production`

    --output -o         Output final result to stdout. You may also want to
                        disable gzipping with --no-gzip
                        If browserify used for bundling, `fullpaths: true`
                        will be passed as an option to browserify, so that
                        e.g. `discify` can be used for further bundle
                        inspection

    --version           Output current version

    Examples:
      weigh lodash
      weigh lodash/map
      weigh lodash@latest/map
      weigh @myorg/mypkg
      weigh @myorg/mypkg@latest
      weigh @myorg/mypkg/foo/bar.js
      weigh @myorg/mypkg@latest/foo/bar.js
      weigh @myorg/[email protected]/foo/bar.js
      weigh ./path/to/foo/bar.js
      weigh /absolute/path/to/foo/bar.js
      weigh . (resolved module from cwd)

Example:

$ weigh lodash

Outputs:

Downloading lodash, this may take a little while…
Downloaded 1 package(s)

Weighing lodash…

Approximate weight of lodash:
  Uncompressed: ~412.11 kB
  Minified (uglify): 51.61 kB
  Minified and gzipped (level: default): ~18.82 kB

Note: By default weigh uses browserify under the hood to bundle the module, and adds envify as a global transform, with NODE_ENV set to production

This means weigh will report the size of a production build for modules that does code branching based on process.env.NODE_ENV

For example compare:

$ weigh redux
Approximate weight of redux:
  Uncompressed: 28.5 kB
  Minified (uglify): 7.82 kB
  Minified and gzipped (level: default): 2.73 kB

...with:

$ weigh redux --development
Approximate weight of redux:
  Uncompressed: 28.5 kB
  Minified (uglify): 9.23 kB
  Minified and gzipped (level: default): 3.36 kB

Inspecting the final result

You can output the compiled bundle for further inspection using --output (or -o) command line option. Note: By default this will output the gzipped result, so you'd probably want to use the --no-gzip flag

This will just pipe generated the bundle to stdout, which also enables further bundle size breakdown e.g. using hughsk/disc.

For example:

weigh --output rxjs --no-gzip | discify --open

Some more examples of supported module formats

  • weigh lodash
  • weigh lodash/collection/map
  • weigh lodash@latest/collection/map
  • weigh @myorg/mypkg
  • weigh @myorg/mypkg@latest
  • weigh @myorg/mypkg/foo/bar.js
  • weigh @myorg/mypkg@latest/foo/bar.js
  • weigh @myorg/[email protected]/foo/bar.js
  • weigh ./path/to/foo/bar.js
  • weigh /absolute/path/to/foo/bar.js
  • weigh . (module in cwd)

License

MIT