New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript: Slow compilation time #5820

Open
d0minikt opened this Issue Nov 15, 2018 · 10 comments

Comments

Projects
None yet
8 participants
@d0minikt
Copy link

d0minikt commented Nov 15, 2018

Now that create-react-app now natively supports typescript, I gave it a try. I expected near instant compilation times after making a change to a file, just like with JavaScript. Instead, I got about 3-5s of delay on the official typescript cra (out of the box). I thought this delay would disappear after moving to babel 7, I thought we simply strip off TypeScript when running the dev server and properly compile TypeScript and check for errors when building the production build? Is this possible?

@Timer Timer added this to the 3.0 milestone Nov 17, 2018

@d0minikt

This comment has been minimized.

Copy link

d0minikt commented Nov 17, 2018

As we are already using babel 7, it's not the babel-loader that is slowing down the build times. In the react-scripts webpack config, if you delete the ForkTsCheckerWebpackPlugin, the build times drastically drop meaning that this is what causes our slow build times.

I'm sure many users would prefer near instant re-compilation times and have the option to disable ForkTsCheckerWebpackPlugin, as they already have great linting & type checking in their editor, such as in VsCode, and optionally support checking types with e.g npm run check-types which would simply run tsc and display any type errors. This conventions has been well shown in this article about typescript with babel 7. Currently the only way of doing this, is running npm run eject, can we add some option to enable/disable the type checker? Thank you 👍🏻.

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

ianschmitz commented Nov 17, 2018

Enabling async on ForkTsCheckerWebpackPlugin usually drastically improves the re-compilation times in my experience.

You can see our previous discussions on this during the original TypeScript PR a while back, where we had issues enabling async in CRA over at #4837, and it wasn't feasible to include at the time. I think we would all love to see this enabled, but we would have to solve the issues mentioned in that thread.

Some notable comments:
#4837 (comment)
#4837 (comment)

@d0minikt

This comment has been minimized.

Copy link

d0minikt commented Nov 17, 2018

@ianschmitz Changing the ForkTsCheckerWebpackPlugin config async to true and silent to false seems to fix both the issues you stated above. Errors are perfectly displayed.
5820 1.

Obviously, because async is enabled and the ts checking takes more than the babel process, the errors are displayed with a delay.

@Bnaya

This comment has been minimized.

Copy link

Bnaya commented Nov 18, 2018

IMO disabling type checking by default, or adding ability to opt out, makes a-lot of sense

@deftomat

This comment has been minimized.

Copy link

deftomat commented Nov 26, 2018

Slow TS recompilation is a big pain in CRA projects. I'm hoping that this could help #5903

@hlthi

This comment has been minimized.

Copy link

hlthi commented Dec 10, 2018

#5959

Rebuild Time( skipLibCheck: false) : 5.20
Current Rebuild Time(skipLibCheck: true) : 0.4 seconds
Ratio : 13

@ianschmitz ianschmitz modified the milestones: 3.0, 2.1.x Dec 11, 2018

@shavyg2

This comment has been minimized.

Copy link

shavyg2 commented Dec 14, 2018

how are people working around this issue? I normally do everything i can to avoid ejecting but this is unbearable?

@hlthi

This comment has been minimized.

Copy link

hlthi commented Dec 14, 2018

how are people working around this issue? I normally do everything i can to avoid ejecting but this is unbearable?

Just change tsconfig.json , "skipLibCheck" : true

@ohjames

This comment has been minimized.

Copy link

ohjames commented Jan 15, 2019

@hlthi skipLibCheck improves the situation somewhat but it's still not adequate IMO. It's a shame that async is disabled just due to the terminal clearing. I specifically disable the screen clearing (via CI=true) as I find it irritating. Now it's doubly irritating haha ;)

@ohjames

This comment has been minimized.

Copy link

ohjames commented Jan 15, 2019

Created a PR with a fix: #6209
With this change you can simply use CI environment variable to have your type checker run asynchronously, at the cost of create-react-app not clearing your terminal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment