Consider replacing Babel with SWC

[joepio]

Transpilation feels like the number one bottleneck for my productivity in large React projects. In some projects, I have to wait for half a minute to see the code changes in my browser. Luckily, some clever developers are working on SWC, the "Speedy Web Compiler". It basically replaces Babel, and it's crazy fast: 16 to 40 times faster, according to their own benchmarks.

SWC can be used with webpack and it supports pretty much all of the most important features (JSX, Typescript, source maps, legacy ES).

Maybe the project is not mature enough to fully replace Babel, but I think it makes sense to put it on the radar.

[heygrady]

https://gist.github.com/bo01ean/532c33e20c0c79c5b6d1541fa3c9c4e9

[heygrady]

Did some peeking here. Looks like it works pretty well out of the box but you could not get 100% of the current feature set that create-react-app has today with the current state of SWC.

1. No support for Flow (not a blocker for non-flow projects)
2. No support for babel-plugin-macros
3. No support for babel-plugin-transform-react-remove-prop-types (less important for TypeScript projects)
4. No support for babel-plugin-named-asset-import (used for adding svgs)

[theKashey]

5. No support for usage-based polyfilling, provided by preset-env, aka useBuiltIns.

[heygrady]

@theKashey swc-project/swc#537

I think they do have that.

https://swc-project.github.io/docs/preset-env#mode

mode

See: https://babeljs.io/docs/en/babel-preset-env#usebuiltins

Possible values: usage, entry, undefined Defaults to undefined.

Note: Currently usage is not efficient as one of babel. Even though, it does not matter in real world codes.

[MrEmanuel]

I would love to be able to change the Typescript transpiler/compiler to swc when installing Create React App, or have it as default. 👍

Also, is there an easy way to make the switch myself and change what transpiler is targeted by the react scripts?

[pradel]

@MrEmanuel I created a craco plugin craco-swc to let you use swc without having to eject. I also created craco-esbuild to tests both tools. I found that esbuild is faster as we can also replace the terser minifier with it. If you want to read more I wrote a small blog post sharing the benchmark I got https://dev.to/pradel/boost-your-create-react-app-workflow-with-esbuild-swc-3a8m.

[ckken]

support svg react vue & more... https://github.com/efoxTeam/emp/blob/main/projects/swc-react-demo/README.md

[tomasbruckner]

Or integrate something like Vite.

It is starting to feel like CRA is lacking behind in this department.

[kdy1]

I'm considering support for using babel plugins by adding some APIs like babelify() and invoking babel plugins with babel ast. (Groundwork is WIP)

But it's not trivial work, so I'd like to know if you are interested in switching to swc if it supports babel plugin.

[JanJakes]

Both Snowpack 3.0 and Vite 2.0 went with ESBuild.
But yeah, the question is if Vite or Snowpack themselves could be the basis of CRA in future.

[asherccohen]

I would love to be able to change the Typescript transpiler/compiler to swc when installing Create React App, or have it as default. 👍

Also, is there an easy way to make the switch myself and change what transpiler is targeted by the react scripts?

You can fork and maintain your version of react-scripts.

[asherccohen]

Swc-loader has improved a lot over the last couple of months, any interest in making this finally happen?

[JanJakes]

Swc-loader has improved a lot over the last couple of months

It did indeed.

Both Snowpack 3.0 and Vite 2.0 went with ESBuild.
But yeah, the question is if Vite or Snowpack themselves could be the basis of CRA in future.

Having said this in the past I should add now that SWC is now used by Deno, being adopted by Next.js, and aims high with full TypeScript support, Babel replacement, a bundler (spack), and one day maybe even a TypeScript checker (stc).

Their own benchmarks also seem to outperform ESBuild today (transforms only, haven't seen spack benchmarks yet).

[JeremyGrieshop]

I recently replaced babel with swc for a large component library of mine:

> rimraf lib && cross-env NODE_ENV=production babel src -d lib --extensions '.js,.ts' -s

Successfully compiled 524 files with Babel (7110ms).

> rimraf esm && cross-env NODE_ENV=production swc src -d esm --extensions '.js,.ts' -s

Successfully compiled: 524 files with swc (28ms)

That's 7110ms ... to 28ms.

[dima-vakatsiienko]

Create react app needs swc instead of babel.
https://swc.rs/docs/benchmarks#es3-1

[fbarbare]

Any thoughts on this from the maintainers' side? Is that something you guys are currently considering/experimenting with? As SWC has matured a lot, it might good to get your insights and what would be missing for it to make its way to CRA

[tomasbruckner]

@fbarbare CRA is in maintenance mode so I doubt it will ever be implemented.

[tomer-dev]

Hey React maintainers, big fan 🎊

This issue seems to be quite informative, what's your opinion on integrating ESBuild/SWC into CRA?