ESBuild and SWC: Worth your time?

Подписаться 181 тыс.

Просмотров 27 тыс.

50% 1

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

Наука

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@yassinebouchoucha 2 года назад

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

@MelroyvandenBerg 4 месяца назад

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

@MrAbuYT 2 года назад

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

@seatube327 2 года назад

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

@stuffedcode 2 года назад

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

@thiccboi6211 2 года назад

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 2 года назад

Damn, that's impressive

@thiccboi6211 2 года назад

@@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 2 года назад

Wow, big win

@SebastianVuye 2 года назад

Thanks for the crystal clear explanation!

@marcosmercedesn 2 года назад

Very insightful information in here, thanks for the research

@MoireFly 2 года назад

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!

@daveisdead 2 года назад

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

@bythealphabet 2 года назад

Great video Jack Thank you.

@cusxio 3 года назад

Cant wait for this 😀

@testuserselvaraj 2 года назад

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

@shinmessiah 2 года назад

Great content thank you sir

@darwinvilcachaguaayala7647 2 года назад

Great video!

@me_hanics 2 года назад

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 2 года назад

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

@CodingPhase 2 года назад

great video

@yuriygerasimovich4187 2 года назад

Thanks!

@adarshpandya 2 года назад

Best content jack :)

@BartekKozera 2 года назад

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

@minthosiagian6094 2 года назад

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

@jherr 2 года назад

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

@xtinctspecies 2 года назад

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 2 года назад

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

@s91630277 2 года назад

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 2 года назад

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.

@user-wt5iq5ef3l 2 года назад

Good video

@iamfotx 2 года назад

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 2 года назад

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

@mainendra 2 года назад

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 2 года назад

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

@ursochurrasqueira 2 года назад

nice video

@Herob527 Год назад

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)

@wizardoflightnings6841 Год назад

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

@ashish_prajapati_tr 2 года назад

helping you to break RU-vid algorithm

@ArturCarvalho 2 года назад

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

@jherr 2 года назад

Is it out?

@AnkurOberoi 2 года назад

@@jherr it is now :)

@cheattube 2 года назад

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

@MelroyvandenBerg 4 месяца назад

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

@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

@betoharres 2 года назад

nice shirt :D

@wizardoflightnings6841 Год назад

Pimp my Compiler 😎

@mr.random8447 2 года назад

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

@gcxs 2 года назад

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

@seanknowles9985 2 года назад

amazing content :)

@anonymousghost5384 Год назад

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

@dimitriborgers9800 2 дня назад

Probably a dumb question, but do the outputs of each builder differ? Is the output of tsc always the same as esbuild?

@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.

@amarg26 2 года назад

Needs to compere with vite also.

@robertogermanpuentesdiaz2500 2 года назад

Today, is there better option?

@PhilipAlexanderHassialis 2 года назад

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 2 года назад

Hahah! Nice!

@arcan762 2 года назад

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

@Priva_C 21 день назад

Please make an update in 2024 🙏🏽 I believe swc may be faster now

@geoffzhu5783 2 года назад

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 2 года назад

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

@eZU4nQsWN9pAGsU38aHj 2 года назад

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

@jherr 2 года назад

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

@onebronx 2 года назад

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

@ronswanson195 2 года назад

You rock! Subscribe + like

@adicide9070 2 года назад

ruuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuust

@quanle760 2 года назад

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 2 года назад

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

@rishabhrathod01 2 года назад

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

@valoricDe 2 года назад

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 2 года назад

Absolutely! I'll check it out!