ESBuild and SWC: Worth your time?

welcome back to blue collar coder i'm jack harrington add to her on twitter and today we're going to take a look and see if swc and es build can really give you the time and money savings that they're advertised to do by making your compile times that much faster so this is mainly going to be a review of my findings but there's a whole bunch of shared code that i'm going to give you that you can play with and it's pretty fun so what are we going to be comparing we're going to be comparing the typescript compiler which is written in javascript the babel compiler which is written again in javascript the swc compiler written in rust and then the es build compiler written in go and to do that we have a simple set of projects for you and we'll start off with the most simple ones so this is a library project and we've got a single dot ts file in here that has a class that is unimplemented and this is probably the smallest thing you could build now in a typescript world you'd probably just compile it like this you bring in typescript as a dev dependency and then you do tsc to build the file so let's see how long that takes by doing time yarn build so that takes about 1.45 seconds on my machine this is actually the total number that we're going to be using for comparison so 1.354 now how do you do that in es build let's take a look again at our package.json in this case we still have typescript and we also have yes build and then instead of tsc we're using es build we're giving it the source directory source and then we're giving it the output directory where we want to go so let's go time that one that took 0.31 seconds so compare that again to this 1.354 it's about a second worth of savings just on this tiny little file so some pretty impressive savings there now let's go take a look at swc and see how that works in this context and we'll take a look at our package.json here we bring in two packages we bring in the cli and we bring in the core and then from there we can just say hey i want to do swc against the source and put the output in the disk directory now let's go see how long that takes that takes 0.447 and that's certainly better than the 1.3 seconds that we got with tsc but these are all relative measures because your numbers may vary depending on the machine you're running on i'm running on a 2019 macbook pro you may be running on a vm so the numbers may vary drastically but the percentages are probably going to be remain about the same all right so i'm gonna go introduce you to my spreadsheet where i stored all these numbers again all of this is available to you there's a spreadsheet link in the description and all the code is linked to also in the description so this is the library project and so we can see that we're getting an 80 savings with yes build and a 33 savings with swc i didn't really think that was a great test a single file that's not really what the kind of thing you'd want to optimize with a different compiler and spend all the time doing that but you might want to do that in the case of a very large project so i had to go and create a very large project that i call pathologic and why did i call it pathologic well it's just kind of silly so we'll go over here to library path logic go to our starter and we can see that it's just 808 different pokemon components generated from a pokemon data file which is pretty cool and i've used this again in multiple scenarios the server over here is actually showing you what this looks like it's actually kind of neat i guess but it's not all that practical but it does represent a very large project set so what are the numbers looking like in that case so we can see that the baseline here for tsc is an 11 second compile but yes build has remained essentially flat at about 0.23 seconds which means you get a 97 savings in terms of compile time [Music] and a similar kind of thing with swc again pretty much almost flat at 0.79 maybe even a little less which gives you a 92 savings so if you have these library type situations i think using one of these two is just fantastic and there's really no downside to it then i decided to take a look at web stuff so i started with create react app or cra and i just have an off-the-shelf starter it literally has an empty app.tsx file it just says hello and the numbers that i got on that were really confusing that's not supposed to happen so the baseline yarn build time to go and build that project for release mode came in at about 4.17 seconds on my machine so for es build and swc i used krakow now krakow allows you to go override the cra defaults and bring in your own stuff in this case they're bringing in es build and swc and the installations are actually really simple you just bring in krakow yes build and then cracko and then you have a configuration file where you bring that plug-in and then you just use that plug-in so i made sure that it was running and the results that i got were kind of weird actually in the case of a very small project it actually took more time with yes build about 50 more and about 80 percent more build time with swc so i don't really know what's going on there so i wanted to kind of dig into it a little bit more so i brought in all of those pathologic components and the numbers started to equalize a little bit so the build time for the baseline which is really just babble was about 70 seconds and then es build was about four percent less than that five percent less than that and swc was about five percent more than that so there's a whole lot going on here that isn't just the compilation which is really important so i was like hmm okay well if cra is giving me problems then maybe i can take a look at next.js because one of the things that got me on this hunt was the recent release of an xjs 11.1 which was advertised as having swc or at least i thought it was advertised as doing swc so i created a next.js10 project and an equivalent nextjs 11.1 and ran it and wouldn't you know the numbers are exactly the same so i went back to that press release and i was like hey isn't there swc in here and it turns out that this is more just a press release for 11.1 they're working on integrating swc and they will share more results of that adoption as we go on but swc isn't currently in 11.1 so next gs not a fair comparison on this one i mean you could go and integrate it yourself but i kind of wanted to look for off-the-shelf solutions so i know webpack 5 myself so i used my webpack 5 starter kit to get a baseline of a very simple webpack 5 configuration and how it might fare so let's go take a look at how that's integrated because i think it's actually kind of interesting so over here in our webpack config for web pack 5 normally we would just have babel loader and in the case of yes build instead of babel loader we bring in es build loader and in the case of swc we bring in swc loader and you get some options and things like that so yeah pretty easy stuff so how they perform well let's go take a look so the baseline of webpack five was about four seconds and with the es bill version we saved about 18 off that dropped down significantly swc dropped down a little bit less but still good stuff and then i brought in the much larger pathologic data set and that clocked in at about 12 seconds to build that using babel and about seven seconds to build that using yes build and about eight seconds to build that using swc which is an appreciable savings so i think as your webpack five projects grow this is definitely something you should be taking a look at of course i didn't stop there i also wanted to take a look and see if i can get this done on rollup and i could to a certain degree so let's go check that out over here we have the starter package for roll up where we bring in just simple typescript for the basic one and then we've got the es build version which is just bringing in es build in the roll up plugin and there's some configuration around that but you know this is all documented again all of these projects are there available for you on that github repo so let's see how rollup did so on the baseline meaning just a simple single component application that's about four seconds to build and about two seconds to build with es build so wow that's a pretty good savings right there of 31 and then on the pathologic case with the tons of pokemon components about 18 seconds to build that in baseline and then five seconds with es build so really good stuff the reason that i didn't have swc on this is that swc i couldn't get the integration to work with roll up if you can get that working please let me know and i'll add it to this spreadsheet really appreciate that so as you can see there's some real benefits to using es build and swc there's definite time savings both at the build side which is really important when it comes to ci cd for i know these numbers look small when it comes to rates of money but trust me they add up if you've got a ci cd where you're doing a preview on every single pr and you're doing builds on every single pr you get a lot of minutes going and these numbers will add up and sim similar sort of things with any kind of these vendors the circle ci although their numbers are a little bit more hidden behind credits and things like that but it's a similar kind of thing you really want to make sure that your build times stay as low as they can so you can get all the value out of that those preview builds they'll build faster for you the cycle time will be faster and you'll pay less money which is great and all of these benefits also go to development time i know i did a lot on build here but it's also the same for your dev time when you hit do fast refresh it's going to be that much faster well i hope you got a lot out of this video if you have any questions or comments be sure to put those in the comment section down below i love responding to your comments and i know youtube loves to see your comments as well of course if you liked the video be sure to hit that like button if you really like the video hit the subscribe button and click on that bell and you'll be notified the next time a new one of these videos comes out a lot of research on that one wait regex's know your reg x's see you next time

Channel: Jack Herrington

Views: 6,458

Keywords: ESBuild and SWC, ESBuild compiler, JS/TS compilers, Javascript compiler, Typescript compiler, esbuild, esbuild react, jack herrington, javascript compiler, js compiler, swc, swc compiler, swc react, ts compiler vs babel, typescript compiler

Id: EXI9v6i7bAo

Length: 10min 58sec (658 seconds)

Published: Wed Aug 18 2021