Enforce hoisting of some packages to fix giant disk size with Yarn

Yarn has known issues deduplicating dependencies, sometimes failing to hoist dependencies shared between a ton of packages (such as babel-runtime) and producing installs 5 times bigger than npm: https://github.com/yarnpkg/yarn/issues/2306.

While we could disable Yarn integration (https://github.com/facebookincubator/create-react-app/issues/1390), I’d like to explore an alternative approach. We should be able to determine which package causes most duplication, and then hoist it manually by making it an explicit dependency of react-scripts. This would ensure Yarn deduplicates it. This is a temporary workaround until Yarn actually fixes the algorithm (tracked in https://github.com/yarnpkg/yarn/issues/2306).

Please don’t hesitate to help with this. You would need to:

1. Reproduce the issue with giant (~1GB) install locally with Yarn.
2. Figure out which dependencies get duplicated. (I don’t know the easiest way but you could probably look at Babel packages and see which dependencies end up in node_modules of each of them.)
3. Add the duplicated dependencies to react-scripts itself to hoist them.
4. Verify that the issue is resolved.

[omrigilad]

I don’t mean to imply that I’m somehow more qualified to prioritize tasks than anyone else, especially @gaearon, but I fail to see why this issue is a big deal.

At the end of the day, disk space is cheap, this has no impact on build size or, if I understand correctly, build time. Its just feels to me like complaints about the size of node_modules are almost like saying “back in my day we used to walk uphill both ways to hand pick minified jQuery plugins and lovingly lay them down in the vendor directory.”

Certainly this duplication bug is a problem that yarn should strive to fix, but I don’t really see how this matters enough to warrant temporary workarounds in CRA.

[jkimbo]

So I’ve done some investigation into deduping some of the dependencies:

Baseline:

--- /create-react-app/test-1 ---------------------------------------------------------------------------------------
  543.5 MiB [##########] /node_modules
  188.0 KiB [          ]  yarn.lock
   60.0 KiB [          ]  README.md
   32.0 KiB [          ] /public
   24.0 KiB [          ] /src
    4.0 KiB [          ]  package.json
    4.0 KiB [          ]  .gitignore

Adding core-js as a top level dependency reduces the size significantly:

--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -28,6 +28,7 @@
     "babel-eslint": "7.1.1",
     "babel-jest": "18.0.0",
     "babel-loader": "6.2.10",
+    "core-js": "2.4.1",
     "babel-preset-react-app": "^2.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",

--- /create-react-app/test-2 ---------------------------------------------------------------------------------------
  194.0 MiB [##########] /node_modules
  188.0 KiB [          ]  yarn.lock
   60.0 KiB [          ]  README.md
   32.0 KiB [          ] /public
   24.0 KiB [          ] /src
    4.0 KiB [          ]  package.json
    4.0 KiB [          ]  .gitignore

Also adding babel-runtime reduces the size even further:

--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -28,6 +28,8 @@
     "babel-eslint": "7.1.1",
     "babel-jest": "18.0.0",
     "babel-loader": "6.2.10",
+    "babel-runtime": "6.20.0",
+    "core-js": "2.4.1",
     "babel-preset-react-app": "^2.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",

--- /create-react-app/test-3 ---------------------------------------------------------------------------------------
  142.3 MiB [##########] /node_modules
  188.0 KiB [          ]  yarn.lock
   60.0 KiB [          ]  README.md
   32.0 KiB [          ] /public
   24.0 KiB [          ] /src
    4.0 KiB [          ]  package.json
    4.0 KiB [          ]  .gitignore

Lastly if just babel-runtime (with a carat range) is defined then you get most of the benefits:

--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -28,6 +28,7 @@
     "babel-eslint": "7.1.1",
     "babel-jest": "18.0.0",
     "babel-loader": "6.2.10",
+    "babel-runtime": "^6.20.0",
     "babel-preset-react-app": "^2.0.1",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
     "chalk": "1.1.3",

--- /Users/kimjona/code/create-react-app/test-4 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

  148.7 MiB [##########] /node_modules
  188.0 KiB [          ]  yarn.lock
   60.0 KiB [          ]  README.md
   32.0 KiB [          ] /public
   24.0 KiB [          ] /src
    4.0 KiB [          ]  package.json
    4.0 KiB [          ]  .gitignore

From this is looks like the quickest solution would be add both babel-runtime and core-js to react-scripts. From this is looks like the quickest solution would be add just babel-runtime to react-scripts. What do you think @gaearon ?

Node version: v6.9.0 Yarn version: v0.18.1 Operating system: Mac OS X 10.11.6