What's your ratio between direct and transient NPM dependencies?

#discuss #javascript #npm

Run the following commands and share the two numbers.

1️⃣ npm ls --parseable --depth 0 | wc -l
2️⃣ npm ls --parseable | wc -l

Also, it'd be great if you shared your tech stack. I'm curious to see if certain patterns emerge.

For example, a Sapper (https://sapper.svelte.dev) app out of the box:

1️⃣ 19
2️⃣ 263

Top comments (3)

Barry Low • May 3 '20

1️⃣ 70
2️⃣ 1159

Using Svelte/Sapper/Rollup/Cypress/Jest in Lerna/Yarn-workspace monorepo. Many of the dev packages are for linting, transpiling, bundler plugins, etc.

To add more context:

In a monorepo, dev dependencies are hoisted to root node_modules:
- du -sh ./node_modules --> 377M
Dependencies in the Sapper app:
- du -sh ./apps/client --> 8.2M

note: Monorepo used for multiple clients, typescript/express api, and util libs

I've done 0% optimizing, but exporting my Sapper app creates a bundle:

3.3MB
- Initial render html/js/css: 133kb (uncompressed)
- Total js files: 620kb
- Rest is fonts, icons, images, etc.

I'm personally very curious about rebuilding app in react and comparing, but as Svelte is compiled and via Sapper, SSR/code-splitting, etc is out-of-the-box and simpler.

The main contextual takeaway is that at least the bulk of the dependencies are for dev and get stripped away.

Mike • May 3 '20

Very interesting, thanks for sharing and providing so many details.

I use a very similar tech stack, except for Jest. If your repo is public, do you mind sharing the link? Here or via direct message.

My boilerplate monorepo is at github.com/mikenikles/monorepo-tem.... Nothing optimized either but it provides the separation of concerns I care about for projects.