Repository navigation
Slim Dependencies #1183
Description
Activity
Amazing investigation, thank you.
Another thing that might help would be trying
greenkeeperto keep things up to date. There's an issue withbabelI am noticing.react-scriptsrequiresbabel-core@6.17.0.babel-corerequiresbabel-register >= 6.16.0. Since the latest isbabel-register@6.18.0, it grabs that.babel-register@6.18.0requiresbabel-core >= 6.18.0, but we only havebabel-core@6.17.0locally, so it has to grab another copy,babel-core@6.18.2.
Assuming this isn't just a program with my machine, I think you can run
yarn list babel-coreto see this. If not, please correct me.And I don't know why I'm just now noticing this, but since the version of
fbjsthatreactupon depends on a different major version ofcore-jsthan Babel and Friends, that is not deduping properly, either. Oncereactbumps to at leastfbjs@0.9.0-alpha.1, it should save something like 1 to 14 megabytes, depending on howyarndedupes it. Although I'd imagine thatfbjs@0.9.0would have to come out of alpha first.Also interesting: apparently installed size is larger with Yarn? https://twitter.com/petrhurtak/status/812356423795568640
I think that's because of how
yarnandnpmdedupe things. The most obvious example would be withcore-js;fbjsrequires one version,babel-runtimerequires another. Installingnpmonly leaves two copies ofcore-js, butyarnseems to install a copy in every directory that requiresbabel-runtime.You can see this by going to the
babel-generatorfolder undernode_modules; when installed bynpm, it should not have anode_modulesfolder, when installed byyarn, it should have one with.bin,babel-runtime, andcore-js.Can confirm that yarn size is between 20-50% larger and the same % increase in total number of files due to the structure under yarn.
Instead of react-scripts I used react-scripts-ts, node_modules folder was 137MB instead of 561MB
but yarn seems to put minimatch@3.0.2 in the base node_modules folder while placing minimatch@3.0.3 in the node_modules folders of babel-core, eslint-plugin-import, glob, fstream-ignore, multimatch, readdirp, and sane, meaning the same version of a ~30 KB dependency is copied six times over.
yarnpkg/yarn#2306 should help with that, once implemented!
acorn-globalsnow usesacorn@4.0.8, as doesjsdom. However, I noticed thatespreedepends on a specific version ofacorn(acorn@4.0.4), so there are still three versions required.Somewhat related, I was a bit alarmed at my first run of
create-react-appyesterday, when I checked the size of mynode_modulesfolder and found179,491,959 bytes (556.6 MB on disk) for 110,557 items. 556MB is quite a lot!I was looking for a light-weight way to get up and running with react, ideally to spin up a handful of hello-world apps locally for running through tutorials, etc. Over half a gig does discourage creating a number of quick little prototypes.
I'm new to the react world though, so perhaps there is a good resource for doing this!
This is a different issue and caused by Yarn bug: #1397. We'll work around it in 0.9.0.
Indeed it is! Nuked the
node_modulesdirectory & reinstalled w/nmpinstead ofyarn, dropped to72,495,611 bytes (131.7 MB on disk) for 1,922 items131MB is a lot easier to swallow than 556MB.
This is why you should be careful adopting new tech 😉
Reacted by Abhinav Singijest@19.0.0has been released, which contains thenode-notifierbump. It's also about a megabyte smaller.Reacted by dan and Michał PierzchałaYou can take a high-level view here: http://pkgsize.com/react-scripts.html
jest,webpack,autoprefixerandeslintare the four largest contributors.autoprefixerlargely due to the ever increasingcaniuse-db: http://pkgsize.com/autoprefixer.html (isautoprefixerreally a must-have?)jestmostly due tojest-climostly due tojsdomstuff andistanbul-api: http://pkgsize.com/jest-cli.html... and they all include a whole bunch of
babellibs – of whichcore-jsmakes up a large part: http://pkgsize.com/babel-runtime.htmlReacted by dan and Pete NykänenI wonder how this compares to master since we switched to webpack 2 and might have new regressions (or it might be better). We should cut a canary release.
FWIW a PR has been filed for
browserify-zlib: browserify/browserify-zlib#22jest, webpack, autoprefixer and eslint are the four largest contributors.
jesthas an issue similar to this one. You might be able to getwebpackandeslintinterested if you asked.autoprefixer largely due to the ever increasing caniuse-db: http://pkgsize.com/autoprefixer.html (is autoprefixer really a must-have?)
It's gonna be there anyway, since
cssnanodepends on it.I'll close this as stale. (But efforts to further dedupe are welcome!)
- locked and limited conversation to collaborators
on Jan 20, 2019
Based on a previous discussion.
This is a short list of some of what can be done to reduce some of the larger items that increase the overall size of
react-scripts. Excluded are smaller, opinionated, or rejected fixes.acornare used.4.0.3(560 KB), used byespree,3.3.0(520 KB), used byacorn-jsxandwebpack, and2.7.04.0.8(560 KB), used byacorn-globalsandjsdom.webpackrequired will require the same version ofacornthatespreeuses.acorn-jsxto bump their required version ofacorn, but there has been no response.acorn-globalsrequires the same version ofacornthatwebpackandacorn-jsxrequire, butjsdomuses an older version.espreeto bump their required version ofacorn.recursive-readdirrequired specifically requires"minimatch": "3.0.2", preventing it from deduping with the"minimatch": ">= 3.0.3"ineslint-plugin-import. Which normally wouldn't be that much of a problem, butyarnseems to putminimatch@3.0.2in the basenode_modulesfolder while placingminimatch@3.0.3in thenode_modulesfolders ofbabel-core,eslint-plugin-import,glob,fstream-ignore,multimatch,readdirp, andsane, meaning the same version of a ~30 KB dependency is copied six times over. Fixed with Bumprecursive-readdir. #1560.browserify-zlibpackages ~110 KB of tests. A PR has been filed.escopedepends ones6-mapandes6-weak-map. These two packages, along with their dependantsd,es5-ext,es6-iterator,es6-set, andes6-symbol, andevent-emittertake up ~560 KB. An issue has been filed on this, butescopedoes not seem to be actively maintained. It seemseslintwill forkhas forkedescopefor the next version, which does not contain the polyfills.istanbul-reportspackages a.nyc_outputfolder of ~310 KB. A PR has been filed.jsx-ast-utilspackages ayarn.lockof ~110 KB. An issue has been filed.node-notifiercurrently used byjestrequired includes a CLI that is not used and depends on a framework that is not used elsewhere inreact-scripts. Updates node-notifier dep of jest-cli to v5 jestjs/jest#2718, which is included injest@19.0.0, resolved this.