Any plan to support swc?

[Enter-tainer]

Hi! I recently checked the build log of my site. It takes ~400s in total, in which "Building production JavaScript and CSS bundles" takes 80s. And that is pretty much. Is it possible for me to use swc, instead of babel to transpile my code?

swc is a super-fast js transpiler written in rust. It can be used to replace babel. It is around 18x-40x faster. And it seems that it support pretty much features such as jsx, typescript, tsx and etc.

[vincemtnz]

@Enter-tainer I was wondering if you've already tried customising your webpack config and using swc-loader? While it seems fairly straightforward, I doubt it would be an issue-free transition, judging by the swc / babel comparison here https://swc.rs/docs/comparison-babel/

It would be great to to see what issues, if any, people come up against when replacing babel-loader for swc-loader. I haven't personally tried it but I'd be interested to hear others' experience, if anyone has tried it out.

[Enter-tainer]

I try to add swc to gatsby-starter, but it seems not to be working. Here is my test repo. I'm not pretty sure what these error messages mean.

❯ yarn build
yarn run v1.22.10
$ gatsby build
success open and validate gatsby-configs - 0.045s
success load plugins - 0.338s
success onPreInit - 0.025s
success delete html and css files from previous builds - 0.004s
success initialize cache - 0.021s
success copy gatsby files - 0.057s
success onPreBootstrap - 0.013s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.003s
success source and transform nodes - 0.052s
success building schema - 0.237s
info Total nodes: 33, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.004s
success Checking for changed pages - 0.000s
success createPagesStatefully - 0.054s
success Cleaning up stale page-data - 0.002s
success update schema - 0.017s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.299s
success write out redirect data - 0.001s
success Build manifest and related icons - 0.106s
success onPostBootstrap - 0.110s
info bootstrap finished - 3.206s
success run static queries - 0.140s - 3/3 21.40/s
success run page queries - 0.054s - 5/5 92.51/s
success write out requires - 0.006s
failed Building production JavaScript and CSS bundles - 0.456s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

.inputSourceMap must be a boolean, object, or undefined

File: .cache/polyfill-entry.js


 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

.inputSourceMap must be a boolean, object, or undefined

File: .cache/production-app.js

not finished Generating image thumbnails - 0.677s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[vincemtnz]

This might help you: swc-project/swc-loader#13 -- basically you'll need to pass parseMap: true in your loader options.

I imagine you'll still run into issues with the graphql page / static queries. Perhaps you'll ned to chain the loaders (but will that negate any performance benefits of using swc?)

Edit: I meant to point to this instead swc-project/swc#588 (comment)

[Enter-tainer]

hmm.. Still the same issue, maybe swc is simply not ready for large frameworks like gatsby.

Also, I think it will not make sense if we have to use babel-loader to make swc working, That will surely decrease the performance.

Thank you for your kind reply!

[vincemtnz]

I tried it out last night to see what issues I'd come across before hitting babel specific issues, and got similar results to you. I was able to get past ERROR #98123 WEBPACK (with parseMap: true) and managed to match most settings provided by the gatsby preset but, as expected, any pages or templates with build-time graphql queries build but fail at runtime. Didn't spend much time on it but my hunch is that if one writes a plugin to replace babel-plugin-remove-graphql-queries you might be "almost there" with running gatsby develop. Building a production-ready site with swc/esbuild might be a whole different conversation when one takes optimizations into account.

There seems to be a growing interest in this space. Looks like there are similar efforts with next.js that also hit some roadblocks so it's definitely a conversation worth having. 👀

[gabimoncha]

Sooner or later I think this is a must. Next.js is already doing it

[kaushalyap]

@LekoArts @wardpeet Any plans to support this?

Currently simple change is noticeably slow on Gatsby dev server. Would like to tryout an alpha version when it is implemented.

[wesbragagt]

I'm also very interested in using swc or esbuild with gatsby, without sacrificing all the other optimizations already in place for gatsby builds.

[tony]

This is one of the things that next.js hired a full time developer for that was an swc maintainer.

The reason why is neither swc nor esbuild is prepared to handle things like graphql, emotion, and the myriad of other babel plugins that wouldn't work.

I'm personally going to try next.js v12 to see how swc works. Just testing out the benchmarks on esbuild:

webpack 5

cd require/webpack5/demo/three && time -p ../../node_modules/.bin/webpack --entry ./src/Three.js --devtool=source-map --mode=production --output-library THREE -o out/Three.webpack5.js
webpack 5.58.2 compiled with 3 warnings in 4933 ms
real 5.33
user 8.99
sys 0.24
du -h demo/three/webpack5/Three.webpack5.js*
2.6M    demo/three/webpack5/Three.webpack5.js

esbuild

time -p ./esbuild --bundle --global-name=THREE --sourcemap --minify demo/three/src/Three.js --outfile=demo/three/esbuild/Three.esbuild.js

  demo/three/esbuild/Three.esbuild.js      592.7kb
  demo/three/esbuild/Three.esbuild.js.map    1.8mb

⚡ Done in 41ms
real 0.04
user 0.29
sys 0.09

still using gatsby for the moment. Would love a miracle to happen :)

[tujoworker]

I have seen it on Twitter several places where Gatsby devs mention SWC and Rust. I’m confident that they will manage to make it happen!

Now that SWC supports a plug-in API – the GraphQL part can be done there.

There is a plug-in for Styled Components

Personally, I think it’s sad that not Babel gets “rewritten” in Rust. It’s so much more work for everyone to change a whole ecosystem. But that’s probably only me. Have never sees anyone asking for the latter.

cc @wardpeet @sidharthachatterjee

[raulvictorrosa]

When they will do it? 🫤
More then one year after!