Create-react-app: 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]

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

[heygrady]

@theKashey https://github.com/swc-project/swc/pull/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.