DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanket Patel
Sanket Patel

Posted on

CRA typescript is compiling slow

CRA with typescript is bit slow even after "skipLibCheck": true. Mostly I find hitting F5 better than waiting for the page to auto reload.

Also the intellisense and error detection just stop working many times. I need to close the VS Code to get it fixed.

Is there any config, extensions or anything can help for this?

Thanks

CC: @swyx

Top comments (9)

Collapse
 
cubiclebuddha profile image
Cubicle Buddha

You can try ctrl+shift+p and searching for restart typescript server. That's much faster than restarting VSCode. It's frustrating that you have to do this sometimes, but I do find that it occurs more often when I have plugins that are interfering.

So you can also try:
1) Making sure you don't have the deprecated version of the TsLint plugin
2) removing all of your plugins if that doesn't work
3) try running Madge to see if you have a circular dependency

Collapse
 
3sanket3 profile image
Sanket Patel Author

I think, I am good with 1 and 2. I should give a try to Madge.

Collapse
 
3sanket3 profile image
Sanket Patel Author

Hey @cubiclebuddha , how to you manage the context to avoid circular dependencies.

For example:
The way we generally do, I have context declared and provided in app.tsx. The app.tsx have dependency of let say page-one.tsx and I want to consume the context in page-one.tsx. (obviously in such scenario passing the props itself enough but consider a deep hierarchy that needs context) Such scenarios will create circular dependency. Do you suggest declaring the context variable in altogether separate file?

Also, I want to test some good production application(not library) built using CRA typescript with mine. So that I can compare and better understand. Do you have any such opensource application in mind?

Thread Thread
 
cubiclebuddha profile image
Cubicle Buddha

If I have a circular dependency between a.ts and b.ts, I pull out the shared code into c.ts and use that in a and b. It shouldnโ€™t matter if itโ€™s function or a function component because itโ€™s all just references.

And sadly, no I donโ€™t know of a good example of a create React app in TypeScript. Iโ€™m only just beginning on React myself. Sadly I was stuck in Angular 1 for a long time. ๐Ÿคฎ

Thread Thread
 
3sanket3 profile image
Sanket Patel Author

Haha Welcome buddy. And we are beginner with TypeScript in React.

I tried Madge and solved all circular dependencies but still there is no significant improvement with that. So not sure if there is something else to check or it's just the way it will be.

Thanks :)

Collapse
 
3sanket3 profile image
Sanket Patel Author

create-react-app v2.1.8 had a nice improvement of emitting files right away and checking the types in background asynchronously.

Collapse
 
conw_y profile image
Jonathan • Edited on

I'm having the same issue. Not sure which version of Typescript you're on, but I'm on 3.4.1. It appears to be a known issue โ€“ see Issue #30663 on GitHub.

I've temporarily downgraded to 3.1.1 and it seems to now be compiling at a reasonable speed.

Collapse
 
cubiclebuddha profile image
Cubicle Buddha

The newest version said that it had a speed enhancement. That might help. Also, that issue (30663) has been fixed.

Collapse
 
3sanket3 profile image
Sanket Patel Author

blog.johnnyreilly.com/2019/05/type... worked like a charm for me.

If you are from Windows or Mac and having high CPU usage issue, definitely check the same.

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.