Slow `ForkTsCheckerWebpackPlugin` compilation compared to running `tsc` directly

Created by: iainvdw

Describe the bug

Recently we've upgraded our CRA setup to the latest version of react-scripts (from 3.0.1 to 3.3.0 at the time of writing) and we noticed a really significant increase in compilation times on our CI server. Instead of a couple of minutes (~5 mins) compiling the application, the total compilation time is now around 15-20 minutes.

We have a project with a CLOC of about 67k lines of TS over 2000 files.

Did you try recovering your dependencies?

Yes, it had no significant effect.

Which terms did you search for in User Guide?

Not really relevant here, as there is not a lot I can customise in an out of the box CRA app's Webpack config.

Environment

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    Yarn: Not Found
    npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: Not Found // <- This is inaccurate, running FF 73.0b7 Developer Edition
    Safari: 13.0.4
  npmPackages:
    react: 16.12.0 => 16.12.0 
    react-dom:  16.12.0 => 16.12.0 
    react-scripts: 3.3.0 => 3.3.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Run time npm run build and wait till it completes

Expected behavior

I'd expected compilation time to be similar to the total time of running npm run build without the ForkTsCheckerWebpackPlugin + a manual npm run tsc.

Actual behavior

The total compilation time is about 30% slower, meaning on my machine it's ~90s for the two separate commands vs ~120s running the default CRA Webpack config.

Seeing the recent increase in compilation times makes me wonder if we can do something with the compilation/type-checking times for TS projects?

Reproduction

I've done a bit of investigation and comparison of various settings in the webpack.config.js of react-scripts. Here are my results:

All tests run with time npm run build.

Projects stats:

Test 1 - Changing config options

useTypescriptIncrementalApi	checkSyntacticErrors	Result	Delta baseline
true	true	119.56s	baseline
false	true	93.48s	-26.08s
false	false	91.95s	-27,61s

Test 2 - No `ForkTsCheckerWebpackPlugin`, manual commands

ForkTsCheckerWebpackPlugin removed from webpack.config.js.

Command	Result
`npm run build`	70.73s
`npm run tsc`	19.65s
Total	90.38s

Command	Result
`npm run tsc & npm run build`	93.95s

Conclusion

Seeing the improvement in completion time, especially after disabling useTypescriptIncrementalApi gives me a couple of questions:

I wonder if there is something special in my project where that would actually slow down the build when this option is enabled?
Is this option really beneficial when running react-scripts build?
Would it make sense to only enable that option when you're running react-scripts start as that's watching changes? In that case I believe it makes sense to do incremental checks.