ReactStateMuseum icon indicating copy to clipboard operation
ReactStateMuseum copied to clipboard

NPM lib size list?

Open GantMan opened this issue 6 years ago • 5 comments

Perhaps this awesome table on the main readme should list the NPM costs?

image

I'm not sure that's a fair thing to list? Just thinking it will help kill all that dead space, heh.

GantMan avatar May 20 '18 13:05 GantMan

I think that would be cool👌

msteckyefantis avatar May 21 '18 03:05 msteckyefantis

Doing this by hand is tedious. Automation is key.

Here's a plan that could work: Create a file in each repo called NPMDep.json Here, we list all the NPM dependencies that are required by npmjs name. Like so:

{
  "npmdeps": ["mobx", "mobx-react", "mobx-state-tree"]
}

We then write a script that will go into each folder, grab those deps, look up their versions in the lock files, and then use package-size to properly identify their sizes in a JSON file.

A second script can go around and look at those JSON files in each folder and then add links to https://bundlephobia.com/ in the readme while also listing the known sizes. The process is automated, so any updates to libraries would get reflected when the script is re-run (that is critical).

The result would be a table in the readme with all the size costs, and a link to verify such!!!

GantMan avatar May 21 '18 15:05 GantMan

Bundlephobia has min and minzip badges, you could save some time and just use those.

Example: minzipped bundle size

Raw markdown: [![minzipped bundle size](https://img.shields.io/bundlephobia/minzip/react.svg)](https://bundlephobia.com/result?p=react)

This displays the bundle size of the latest stable version on npm, you can add a locked version number ([email protected]) to the url too.

solkimicreb avatar May 30 '18 07:05 solkimicreb

very cool! I might work on this script this weekend. Thanks so much @solkimicreb

GantMan avatar May 30 '18 13:05 GantMan

I haven't started on this script, but labeling it for pickup by Hacktoberfest.

GantMan avatar Oct 11 '18 14:10 GantMan