babel-loader cacheCompression setting

[jleclanche]

cacheCompression is an enabled-by-default flag in babel-loader, which gzips the babel-loader cache. The cache in question in CRA can be found in node_modules/.cache/babel-loader and consists of json files that are mainly composed of jsonified source files.

The setting was introduced in the CRA webpack configuration in commit 74c4bae (PR #5053, cc @Timer). Since that PR, the webpack config has been merged into one file and cacheCompression is set to true if NODE_ENV is production, false otherwise.

A couple of thoughts here:

1. Having it disabled in dev and enabled in prod means caching won't be shared between dev and prod. If a dev and prod build happens on the same machine (not unlikely), this actually increases disk space usage.
2. A cursory look at a few of my react projects tell me that the space savings are inconsistent at best. My largest project shaves off ~35%; it's lots and lots of tiny little files: the cached chunks are very small (usually referencing single components) and don't benefit from what you'd intuitively think would compress very well if it were all in one file.
3. Most projects do not actually benefit from cache compression at all, especially in production with builds most often happening in a CI environment, where memory is precious and disk space inexpensive.

So in general I actually disagree with babel-loader's enabled-by-default cacheCompression and I think more people will want it off than on. Thoughts on disabling it in CRA?

[abhinavsingi]

What about the optimisation? Does setting it to false helps in large projects?

https://github.com/babel/babel-loader#options

cacheCompression: Default true. When set, each Babel transform output will be compressed with Gzip. If you want to opt-out of cache compression, set it to false -- your project may benefit from this if it transpiles thousands of files.