ESBuild and SWC: Worth your time?

Is the juice worth the squeeze with these new JS/TS compilers written in Go and Rust? We'll take a look at compiling libraries, as well as several different variations on compiling web applications using Create React App, NextJS, Webpack and Rollup.
Code: github.com/jherr/esbuild-swc-...
Results spreadsheet: docs.google.com/spreadsheets/...
Links:
ESBuild: esbuild.github.io/
SWC: swc.rs/
Babel: babel.dev/
TypeScript: www.typescriptlang.org/
NextJS 11.1: nextjs.org/blog/next-11-1#ado...
Craco SWC: www.npmjs.com/package/craco-swc
Craco ESBuild: www.npmjs.com/package/craco-e...
Github actions billing: docs.github.com/en/billing/ma...
Circle-CI billing: circleci.com/pricing
00:00 Introduction
00:26 The competition
00:45 Library projects
04:18 Web projects using CRA
05:55 NextJS 10 and 11
06:45 Web projects using Webpack
08:00 Web projects using Rollup
09:09 Conclusions
10:13 Outroduction
👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 More Typescript videos: • JavaScript to TypeScri...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#esbuild #swc #javacsript #typescript #react

[@yassinebouchoucha]

10:39 watching your video is like having a senior tech-lead in our team, thanks for the precious Time Saving.

[@MelroyvandenBerg]

well he is basically a tech lead lol lol xD Aren't you!??

[@MrAbuYT]

Awesome stuff! Thanks a lot for this comparison. I will dive deeper into the compilers and try to optimize my projects.

[@seatube327]

Thanks for putting in the time to research these! Great video, will definitely look into these tools.

[@thiccboi6211]

Digging this shirt!! Great content. I had tried esbuild and swc when I tried to port my webpack 4 CRA to webpack 5. The results were similar to what you show here. But our Enterprise app is very large with thousands and thousands of files. The build time was cut from 20minutes to 55seconds

[@v.florio]

Damn, that's impressive

[@thiccboi6211]

@@v.florio But it was a very painful migration. It had to be cancelled because the dev server crashed often because some of the plugins for webpack 4 were leaking memory and we simply didnt have enough time to fix it

[@bigbear187uk]

Wow, big win

[@stuffedcode]

Awesome video! Thank you for sharing your findings! Love the shirt as well!

[@SebastianVuye]

Thanks for the crystal clear explanation!

[@marcosmercedesn]

Very insightful information in here, thanks for the research

[@daveisdead]

I would love to see another one of these now that nextjs 12 has SWC along with the minification

[@vadimmostovenko164]

And nextJs 13 compare to turbopack too

[@MoireFly]

The CRA example is probably a red herring. The whole point of esbuild and swc is that you do *not* need a node.js process iterating over all of your code/syntax trees, and by using CRA, you're basically saying: pick whatever tools necessary to package my project. Under the hood CRA still uses all of the usual tools, and likely one of those tools is still running node.js and touching all kinds of input. Because CRA tries to hide all that complexity under a simple cover, it's easy to miss "implementation details" that entirely defeat the point of something like esbuild or swc. In short, if you want to use CRA with esbuild, you should probably eject from CRA and pin down exactly what CRA is doing to your code - it *should* be running exactly 0 non-esbuild-or-swc modules on it, but you'll likely find it's not. Additionally, it's important to point out that these tools are not full replacements for tsc; they don't do typechecking, and their downlevelling is likely not the same as tsc's or even missing. But the whole point of typescript is type checking, so a real world esbuild config will want to have some kind of way of doing type-checking separate from the build - potentially in a background process, or hooked into whatever IDE you're using; something. But simply replacing a bog-standard webpack-with-tsc config with esbuild is a bad idea for most people; they're losing type checking without noticing!

[@bythealphabet]

Great video Jack Thank you.

[@cusxio]

Cant wait for this 😀

[@testuserselvaraj]

wow, this is awesome, need to share it with teammates now :)

[@me_hanics]

Hi Jack! I've checked out some of your videos and you really seem professional, and I'm really interested on what a professional would put in his CV. Projects mostly, maybe? Can you make a video on your CV, what extra information you left out of it, and what you recommend for others (from beginners to professionals) to put in their CV? Thank you in advance!

[@jherr]

That's a great idea. I would definitely put work projects and personal projects in there, particularly if they are also on github.

[@shinmessiah]

Great content thank you sir

[@darwinvilcachaguaayala7647]

Great video!

[@BartekKozera]

Good video, thanks! Did you perhaps try swc and esbuild to speed up jest tests? I tried that on a fairly big project but it was actually slower, wonder if I'm missing something

[@iamfotx]

Thank you so much Jack for the great content. btw, I really liked your vs code theme? What theme is that? do you have your uses listed somewhere?

[@jherr]

I've started putting my theme in the description. It's Night Wolf [dark blue] with MonoLisa.

[@mainendra]

Really nice comparison 👍. Is it also a good idea to compare snowpack and vitejs? Or not as it’s using webpack and rollup for prod build? 😬

[@rishabhrathod01]

Snowpack and vite both use esbuild for dev and webpack / rollup for build... So that way we already know how they might perform.

[@xtinctspecies]

Thanks for thr hard work Jack! This work has probably saved some jobs where they could have recommended swc at work and then had to backtrack to using standard tooling. I am however interested how vite projects are so blazing fast with esbuild. Worth keeping an eye on Rome build tooling?

[@jherr]

Vite is definitely worth keeping up with, as is Rome given its FB backing.

[@wizardoflightnings6841]

I have a comment! 🙂 Thank you very much, it's amazing! ⚡⚡⚡

[@adarshpandya]

Best content jack :)

[@s91630277]

I would not use esbuild or swc as the replacement for tsc on ci/cd, because they do not do typecheck. You cannot ignore it.

[@jherr]

Fair. But I've seen a bunch of CI/CD flows that compile the source multiple times within the context of a single build. If you have one tsc build that checks the types first, then subsequent builds could be greatly accelerated with esbuild or scw.

[@yuriygerasimovich4187]

Thanks!

[@CodingPhase]

great video

[@herob2659]

In one project of my company where I can do whatever I want (as long as everything works) I replaced webpack with pure esbuild launched via node and pipelines dropped by tens of seconds Also I am working on migrating one project CRA to pure esbuild too and I spent some time on setting proper dev env using esbuild as current ones resulted in infinite refresh (websocket is a spot-on) Now, I'm working on building it and checking if it may work (quite stupid I didn't do it in the first place, but I really wanted to check it, if my idea works)

[@ashish_prajapati_tr]

helping you to break KZbin algorithm

[@cheattube]

i currently use nextjs and honestly after watching this video i realized that i am so illiterated about whats going on under the compiling hood . Any advice where to start to learn react compiling stuff ? we watchers really appreciate your effort to make this kind of great videos, thanks

[@minthosiagian6094]

Awesome content Jack, many thanks! And.. nice shirt, what is that? 😬

[@jherr]

It’s just an Eddie Bauer print shirt. I asked the saleswoman to suggest something that popped on camera and she did not disappoint. 😂

[@ArturCarvalho]

Great video, thanks! Are you going to do a comparison with nextjs 12 that leverages SWC?

[@jherr]

Is it out?

[@AnkurOberoi]

@@jherr it is now :)

[@user-wt5iq5ef3l]

Good video

[@wizardoflightnings6841]

Pimp my Compiler 😎

[@ursochurrasqueira]

nice video

[@SvyatovetsD]

esbuild transpiles only index.ts file in library-pathologic example and not the whole src folder, i guess that's why numbers differ so drastically

[@mr.random8447]

Wonder why Esbuild is faster, thought SWC would be faster because written in Rust

[@gcxs]

esbuild author @evanw: "Go version was faster because GC happened on another thread while Rust had to run destructors on the same thread"

[@anonymousghost5384]

I would like to see these technologies in deno. Could u plz make tutor about integrating them?🌺🌺❤❤❤

[@rahultech77]

Curious about how would you quantity the impact of reducing the build time by x minutes. Can you please give a rough example

[@jherr]

I assume you mean "quantify it"? If so, I would compare build times with and without it. And then to gauge the impact of that I would multiply that delta it by the number of builds I would expect the average developer and/or CI/CD pipeline to do daily.

[@betoharres]

nice shirt :D

[@amarg26]

Needs to compere with vite also.

[@seanknowles9985]

amazing content :)

[@robertogermanpuentesdiaz2500]

Today, is there better option?

[@MelroyvandenBerg]

@jherr I think swc is faster now. Maybe you want compare again in 2024!???

[@arcan762]

The real time cost is how long it takes you to set all of these up...

[@PhilipAlexanderHassialis]

Since there is a reference to the good Doctor, I demand you do a research on time mechanics so I can go back in time and re-thumbs up the video.

[@jherr]

Hahah! Nice!

[@ronswanson195]

You rock! Subscribe + like

[@geoffzhu5783]

Great video，thanks. But i have a little confused😳. Why swc performance is worse，Rust is lower level language than Go. I guessed swc should be better performance，in fact is not

[@jherr]

The difference at scale isn't super huge. Maybe they just have less efficient file I/O.

[@eZU4nQsWN9pAGsU38aHj]

Any comparison to TSC has to have type checking or else the test is completely apples to oranges imo.

[@jherr]

I think these compilers are, at least currently, good for rapid compilation after a typechecking pass by tsc.

[@onebronx]

"npm-run-all --parallel tsc esbuild"

[@adicide9070]

ruuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuust

[@quanle760]

Bad comparison. Running on a tiny target file is super bias, because any build tool will need warmup time, and the real runtime is much different.

[@jherr]

That’s why I compared it on large sets of files as well.

[@rishabhrathod01]

Waiting for cra and @craco to add a stable version of webpack v5 support. Nice video.

[@valoricDe]

Running Next 11.1.0 with Esbuild: github.com/valoricDe/esbuild-loader-examples/tree/master/examples/next In the project I freelance for we got a speed increase from 46 seconds to 24 seconds. @JHerr Maybe you could include this setup to the comparison?

[@jherr]

Absolutely! I'll check it out!