Gatsby: Gatsby project size is huge (490Mo)

[svengau]

Hi, I'm using Gatsby CLI version: 2.11.5, and the node_modules folder is just huge with 490Mo.

`
gatsby new gatsby-site
du -sh gatsby-site/node_modules
490M gatsby-site/node_modules

du -sm gatsby-site/node_modules/* | sort -nr | head -15
52 gatsby-site/node_modules/typescript
30 gatsby-site/node_modules/sharp
25 gatsby-site/node_modules/react-icons
25 gatsby-site/node_modules/date-fns
23 gatsby-site/node_modules/@babel
17 gatsby-site/node_modules/rxjs
12 gatsby-site/node_modules/gatsby
11 gatsby-site/node_modules/prettier
9 gatsby-site/node_modules/gatsby-cli
9 gatsby-site/node_modules/fbjs
9 gatsby-site/node_modules/babel-runtime
9 gatsby-site/node_modules/@types
8 gatsby-site/node_modules/@graphql-tools
7 gatsby-site/node_modules/gatsby-interface
7 gatsby-site/node_modules/core-js-pure
`
I love Gatsby, I know it uses many technologies behind like graphQL, but I have multiple projects using it, and it takes a huge space on my old mac at the end. It would be great to reduce the overall size.

Also, I've noticed Gridsome suffers from more or less the same defect.

[shanejones]

Install your npm packages globally and not locally.

The main difference between local and global packages is this:

Local are installed in the directory where you run  npm install <package-name> , and they are put in the node_modules folder under this directory

Global are all put in a single place in your system (exactly where depends on your setup), regardless of where you run  npm install -g <package-name>

[svengau]

thanks for the quick feedback @shanejones, but I think you didn't get the point.

I've followed the official gatsby quick start guide, so gatsby-cli is already installed globally.

And if you launch gatsby new gatsby-site, the generated project has the node_modules folder with a size of 490Mo.

[herecydev]

I'm not sure there's anything actionable here; frameworks are always going to use a lot! However https://yarnpkg.com/features/pnp is aimed at solving that, and as I understand it does work with Gatsby.

[svengau]

thanks for the link, I didn't know php, will look at it.

When we look at the biggest packages coming with gatsby-starter-default, we've got typescript and react-icons (coming with gatsby-admin).

I don't use typescript so it should not be there, and I've never heard about any gatsby-admin, so maybe this package could be optional. this is just ideas, I'm not completely aware of the gatsby architecture and all its features.

[shanejones]

_I don't use typescript so it should not be there_
A number of the plugins that are installed will be using typescript though so it needs to be installed for those dependencies.

[svengau]

I may have missed something, but those plugins are supposed to be compiled into JavaScript before being pushed into npm, no?

[muuvmuuv]

Try to use pnpm. This saves a lot of space. Running pnpm store prune each month clears unused packages and saves even more. It is pretty normal that node_modules are huge. Each dependency might have its own dependencies so it gets bigger and bigger. The main issue is with authors that add packages because of "great this package does what I want" when only one function from that 2mb package is used.

[lannonbr]

Given this is just the nature of Node.js and many people have given suggestions on how to partially mitigate this (Yarn PnP, pnpm, etc), Is there any reason for this issue to stay open? There's not really a way to solve the original issue with Gatsby other than built it from the ground up which is not feasable.

[herecydev]

I agree, this isn't a gatsby specific problem and there is tooling to solve this problem

[svengau]

I totally agree with you, it's more a Node-js thing. And thanks for the suggestions, I will give a try to pnpm.

Still a point I don't understand is why typescript is installed by default ? @shanejones gave me a first explanation, and I've tried to figure out, but sorry, I can't get it. :-) And I've checked Gridsome, and they don't have typescript installed by default (even if it uses a lot of plugins too).

[herecydev]

Because Gatsby provides OOB support for typescript: https://www.gatsbyjs.org/docs/typescript/