React Scripts Exploration Results/Slowness

[Aghassi]

I've been working with @alexeagle and @gregmagolan on wrapping an internal project that uses Create React App (CRA) with Bazel and seeing how performance is out of the box. In the initial spike, just running bazel build to call react-scripts build did not result in a net positive improvement in build time. In cache miss scenarios, it resulted in an overall net negative in speed.

Vanilla Create React App took 145.48s on about 2.5k files to build.
On the same file set, while ignore storybook and test files, Bazel with rules nodejs took almost twice as long

INFO: Elapsed time: 310.618s, Critical Path: 305.08s

It should be noted that on cache hits, bazel does remain faster. To rule out that the sandbox is not part of the issue, we ran with --profile and --spawn_strategy=standalone to try escaping the sandbox and profiling (re: bazelbuild/bazel#8230). In this case, we saw minor improvements. The profile that came back was as follows:

=== PHASE SUMMARY INFORMATION ===
Total launch phase time         0.049 s    0.02%
Total init phase time           0.022 s    0.01%
Total loading phase time        0.210 s    0.07%
Total analysis phase time       4.441 s    1.40%
Total preparation phase time    0.004 s    0.00%
Total execution phase time    313.388 s   98.51%
Total finish phase time         0.011 s    0.00%
------------------------------------------------
Total run time                318.128 s  100.00%
Critical path (306.232 s):
       Time Percentage   Description
    1.743 s    0.57%   action 'Creating source manifest for @project_deps//react-scripts/bin react-scripts [for host]'
   19.994 s    6.53%   action 'Creating runfiles tree bazel-out/host/bin/external/project_deps/react-scripts/bin/react-scripts.sh.runfiles [for host]'
     136 ms    0.04%   runfiles for project_deps//react-scripts/bin react-scripts
  284.359 s   92.86%   action 'Action @project/build'

As it stands, there seems to be significant slow down within the react-scripts process itself when running under bazel. This issue is to help document and track our findings as we move to speed things up as we support CRA

[Aghassi]

Following up on this, @gregmagolan and I did some extra digging. We were able to find that it is most likely the macOS sandbox which is causing this issue. One of the ways we were able to determine this is Greg went ahead and threw an error almost immediately after invoking react-scripts. Outside of Bazel, this errored out immediately as expected. In Bazel, it took a good 30s. In Bazel with --spawn_strategy=standalone passed, the performance was similar outside of Bazel where it failed immediately. Most likely this means that for adoption of CRA to start, we will have to run unsandboxed on macOS, but sandboxed on CI since our runners will be Linux based. It's possible that as we make steps more granular, this speed hit may not be as bad. But to start, just wrapping CRA out of box and running Bazel will require us to escape the sandbox.

[pauldraper]

Sandboxing is a significant perf hit, especially with lots of files. I would indeed recommend disabling it for dev/local caches and enabling it for CI/distributed caches.

[Aghassi]

@alexeagle I think we can close this as we evaluated the initial performance problem. It will probably take a good amount of leg work on our part to deliver a cohesive guide of how best to start using CRA + Bazel