Vite is The New Webpack and Create-React-App killer!

so if you're struggling with your build time and if you're struggling with webpack performance hr marker performance and you're having really really bad developer experience whenever you're working on your webpack projects well in this particular video we will try to explore the capabilities and performance of using v so v is a really awesome bundler it's actually brand new and it's been created by the creator of view js and it's actually has been used for vue.js for quite some time now it's actually ported into other stuff and mainly what carriers or what we care more about is react.js and typescripts and everything so if it works really flawlessly with all of those in fact it has a lot of stuff it has a lot of kind of templates with typescript and everything from vanilla javascript to project to his village and so much and so much more so why vids is actually special because it uses es bill which is another bundler behind the scenes and this bundler exclusively depending on the benchmarks provided to actually bundle and build your application compared to other bundles so vt is not just like another bundler it's actually much much more than that it has a lot of features for example lightning fast hmr and optimize build it actually has a zero config so you don't have to put the configuration or explicitly tell it to configure something otherwise it just like has everything built in already for example sas support uh css preprocessors maybe you want typescript maybe you want modules maybe you want so many stuff actually they are already built in and it actually has this plug-in kind of ecosystem same way as roll-up does so if you're familiar with roll-up actually vit is based or developed up and roll up so it uses roll up behind the scenes to bundle your stuff and actually put them together but it actually adds a lot more stuff a lot more layers a lot more features a lot more options and configurations you can use in order to make it like you know the best bundle you can actually use for plus it has this really crazy performance so you can just you know put your hands on this really awesome tool with really really nice performance and lighting fast hmr and build into production so you can just you know use this tool with confidence so if you're wondering if it basically does the same thing as webpack but actually has this really image features and it makes it a lot easier to scaffold and create the applications and like webpack so if we try to do a quick comparison between the classic bundlers maybe like webpack and parcel versus the esm bundlers which are like vids and maybe snowpack too so for example here if we take a look onto this one we actually regardless from the documentation of vids so this is actually a bundle based dev server so this is like an hdmi or a dev server or it's it's basically the webpacks dev server so what it does is actually bundles your stuff into a single bundle it puts all of those it puts like for example the entry let's say you've got like multiple routes maybe a login page maybe a landing page maybe an about page all those routes are going to be put together and they're going to have dependencies of modules they will be all all like just bundled together in here and eventually they're going to be put into a single bundle and this is actually the eventual final bundle then this bundle will be just like served into the server then your browser can download this particular bundle every single time and every single time you do a change for your developer experience whenever you do like change something quickly and control s this bundle is going to recreate it from scratch of course there are some mechanisms to update only what's changed and that's what hmr is but it's still very very slow compared to how vit does it so if you go to the other hand in here of how native esm based dev server which is vids or snowpack basically but i'm going to talk more about this in this particular case so it's going to do like in here it's getting the server you got the server in here this is actually the start point and vince what it does is going to provide the server with only the entry point it's not going to provide it with a whole bundle of all the dependencies all the modules all the routes and audio code nothing like that it's only going to provide the entry point which is for example like the index.js and it's going to give it that now later on because our browsers are esm compatible and what i mean by esm is actually ecmascript modules it's something like import and export as defaults or export defaults it's not like the common js where node.js uses that syntax with the require so this is more like the import and nowadays like most of browsers support esm and why not benefit from that so in this particular case and here it provides them an entry point which is an esm entry point then of course you can do like code splitting with using dynamic imports you can do react lazy split in maybe suspense anything you want to do in that particularly so it's going to do all of that but the server is going to take care of loading those separately on every single request so it's not going to load all the bundles it's only going to load the routes by itself and the browser is going to do that by itself so it's going to only load the routes that it needs without loaning the whole bundle and that's going to make it a lot a lot more faster it's going to be like 100x faster if you if you have like this really big projects running both on vids and like esm approach versus running on classic bundlers so to set up and create a vip project it's actually pretty pretty simple so you can imagine this approach the same way if using the create react up cli but it's actually a lot more simpler plus it provides a lot of templates what i mean by a lot of someplace you can you can scaffold and create typescript react vanilla javascript or timescripts maybe you want vue.js and zvelets maybe as well and it's it's actually really really awesome so what i'm going to tell you in here what i'm going to be able to do i'm going to use yarn you can use npm you can use pnpm whatever but i'm going to use yarn i'm going to use the create command so the quick command here you instructed what you want to create now you what i want to create actually do just create bits so you simply provide it with the project's name in here for example vents projects and the next thing here is going to tell you oh which framework you want to use vanilla javascript vue.js reacts preacts and so on and so forth so once you click on that it's going to tell you which preset you want to use reacts with javascript or reacts with typescript which i absolutely love this option because once you select react with typescript everything is going to be set up for you the ts config json everything with vent with timescript so you just with a single button click with a single command you can start your dev server and you can start enjoying your development workflow so if you open up the projects in your favorite code editor mine is vs code in here and you head over to the configurationvid.config.js or typescript sorry you're going to find this really simple and straightforward configuration so it uses the define config from vince and it basically uses the react plugin in order to tell it oh we're using reacts with typescript and everything and that is it that's simply all you need to do to scaffold react to typescript projects and everything is actually will be included behind the scenes of course you can add more plugins more stuff into it you can configure this and since he uses roll up you can configure all the options that rollup accepts throughout the vid configuration as well so the second thing you want to take a look in here is actually backer to json and i want to see what are the scripts there is the dev which is going to open up a dev server using hmr and everything there is a build that's going to run tsc for type checking and it's going to do vip build and finally there's a preview of the build that is you know this is going to create a production ready build so let's go and try the first one which is yarn dev so i'm going to just do yarn devin here and this should go into starting and as you see it's absolutely crazy fast so as soon as you click on that as soon as you run the command you're going to have like 631 milliseconds for the server to start and if you head over to this you're gonna find the application up and running for you and it's just that simple so once you click it there you go the application is already running and you've got your application and this dev server took absolutely less than that to basically scaffold and boot up so if you want to get your hands on in the awesome feature hmr which is quite fast and you see like you want to take a look on how fast this is so for example we've got the server running here side by side and we got the web page so let's try to go and change something and see how fast it is so maybe add awesome and as soon as i control s this is just appearing on the browser and you get this hmr update in here telling you oh you did an hmr update and we did it so quick so you can change whatever as soon as you click you get that of course i'm with you maybe you're saying oh this is just a small boilerplate application it's not that big of a deal that's why you're applying that yes you're right because it's really small and lightweight and webpack even webpack can do it that fast maybe the query reacts um can slightly do it a little bit um kind of like slower than this but it's actually still uh really fast on all these cases but what i'm gonna do right now is actually compare all of those with the real world scenarios with real-world applications that are big applications uh they have a lot of code a lot of stuff a lot of routes and all that sort of stuff and see how it does with vit versus webpack and versus the query react stuff and see all of them side by side how they work perfectly in this like benchmarking test so for the comparison here we got two projects one is the vip projects in here exclusion here this is what the project looks like this is the vid configuration and it's actually a twilio application so this is actually a twitter sample application i cloned it and have it from the twilios open source github page so you can clearly see in here it has a lot of dependencies a lot of stuff like video webrtc so many stuff and so many big dependencies plus you use some tensorflow models to basically change the background and and so many stuff now the second project is actually set up using webpack which is this servicing platform which is as well a big platform so for example let's try to change this particular text in here so let's say i'm gonna go ahead and add now and i'm gonna do ctrl s to see how that's done so you see now webpack started building it took a couple of seconds like two seconds i say where this is actually you know it got applied excuse me just a simple hmr thing it took us that much so i'm gonna go ahead and do uh maybe this one updated as well i'm going to try for the second time ctrl s couple seconds then the updated one appears pretty simple but that's still pretty decent as well so when it comes to development and everything that's totally fine but this project is big but not that really really big one if you have got this legacy very big projects webpack is gonna struggle and it's gonna take much more time to actually apply those hmr updates why because it simply just uses the bundle stuff as we've seen before compared to how esm modules where vit uses or utilizes the esm modules kind of feature to optimize the build and to make it a little bit more performant plus it would apply html updates a lot more faster okay now the second one is we got the vet in here which is the twilio sample app let's try to go ahead and change the simple text as well i'm going to add whatcom in here i'm going to ctrl s and you can just go in and see the html in here so as soon as ctrl s it just immediately applies to the browser in just a very quick thing yes i'm you're gonna probably tell me oh the projects are different yes they are different but this project is actually a lot more complicated than the other projects because uses a lot of stuff it has a lot of dependencies for the dependencies this one has to basically bundle it has like almost like 4 000 and more dependencies bundled compared to the other one it has only 2 000 so it's actually half size it's not that big of a deal to actually compare with dependencies but this project is very very big projects and it's very complicated projects with a lot of dependencies and yet vic could handle it absolutely perfectly with hmr and actually could do all of that in a simple stuff so as you can control as accuracy it's very immediate it takes less than a second it's absolutely crazy how that is fast with hmr in the other hand if you want to see like oh what is the effect of taking or actually doing a lot of change for example removing a huge chunk of code in here for example i'm going to remove this one and i'm going to remove this one as well i'm going to add something in here maybe like return or not return sorry i'm going to add div i'm going to say hello word everything was deleted or something excuse me i deleted a lot of code they added this line of code in here and let's go ahead and control s and see what it does hallelujah it's that fast it's crazy fast and if you're shocked the same way i am in here i was shocked actually when i tried vape for the first time i actually tried it with this this sample twilio application and tried it with different projects and it was just insane compared how v is fast compared to something like webpack and to see the es build or the esm ecosystem in action compared to how webpack does it in a single bundle versus how vit does it in using asa esm to basically exchange that and actually just allow the browser to do or take care of everything by providing him or providing the actual browser the actual file itself without bundling or changing so for example here if we take a look on the vip app on the network tab we see the browser is going to do a lot of requests one of these requests for example the app.tsx it's actually requesting the update tsx it's requesting the main application the same up.txt in here take a look on the source code it's basically the same it's like 90 the same there's only small slice small changes that vid does to make it work perfectly with the browser support but it's still all working it has the important here imported from react refresh in here and it does all of that perfectly using all of those and it just like works so so well especially for example the index in here the theme it's actually important all of those it's important to separate modules by itself and the browser is handling all of those and that's actually why v is a lot faster when it comes to hmr because it's doing all of that by itself it's actually loading the standalone modules it's not rebundling them like webpack is doing it's actually like you know not doing any htmlr function like updates or websockets or any of that because the browser is handling everything if you jump over to webpack you're going to see a complete different stuff the network tab in here says oh webpack is trying to request a different chunks and each one of these chunks is actually having a different source of code and of course your your code is actually among this rubbish code in here which you absolutely can't understand because webpack tries to bundle that tries to add support and yeti area so it adds all of those in here so that's why you see oh that's why webpack is taking a lot longer when it comes to hmr plus the builds are taking longer when it comes to production builds and so many stuff in the other hand if you say oh what about react script or the query react up since the query react type uses webpack behind the scenes and it adds a little bit more sluggish code into it it's less performant than webpack which means it's actually less performance and slower compared to vit so for example we've got this particular project in here which is the twilio project the same way which is the vit one in here the same project absolutely the same one but in this case we are using query react up to bundle everything so first things thing what i would do is actually go ahead and try yarn to start the development server so i'm going to do yarn and start dev which you're going to call react script start so as soon as i click enter let's see how long this is going to take and it's going to take a pretty decent amount of time we all know k react up it's going to take forever but if you compare this to vet the last time we run this particular command it took us like milliseconds to run this which is absolutely crazy and he actually took more than 30 seconds absolutely 30 seconds to start the development server i'm not talking about hmr but i'm talking about more of the development server to actually start so if you compare this to vit if you go to this vip project in here which is the same projects and do yarn dev which going to do vids and start the hrmr development server you click of it and just wait a couple seconds and it took 1815 milliseconds around two seconds and just like this is because it's a cold start so it doesn't take that but if you compare it to queer reactive it's absolutely crazy the other thing i want to quickly go ahead and test is actually the production final build of both of these or three of those which is vint versus webpack and versus the create reacts up which utilizes webpack behind the scenes so i'm going to go ahead and try to use three of those i'm going to go ahead and just do yarn build and see how long all of these gonna take compared to the build command of all of this or comparing vent to both of them so i'm going to run the yarn build in here as well and let's go ahead and start all of those i'm going to start with the query react up in here i'm going to go ahead and like start this one first and start the webpack then finally start the vet so i'm going to click enter here enter on top enter in there so there's absolutely not much of difference but exclusive it has already started transpiling and this is just crazy webpack not really or just it got started the query hooked up i don't know what's wrong with the creator but it's actually still really really late to the party and i don't think it's actually going to make it i think vid is going to make it first but we're going to go ahead and see like comparing to all of those webpack is actually pretty good in here compared to vet and how much there is and i see because in here in here i said before it has like 4 000 dependencies that it needs to include plus is going to do the typings plus they're going to do the the typescript stuff while webpack is going to do the timescale stuff in here but it's not going to do the same way as fit in here because it's going to generate the whole tree so if it finished it's it's actually finished just like compared to webpack oh look at that hallelujah it actually finished compared to the others and this is actually the twilio stuff and this is this is the other stuff and webpack just finished after that after like a couple seconds so of course we got the lead after 70 or 68 seconds we got the first one which is fit after 84 seconds of running this we got webpack and after 75 seconds we got the query reactor finished and as you can see the benchmark is is clearly like 20 seconds or even more than that vent is clearly winning compared to all like the others in here [Music] [Music] you

Channel: CoderOne

Views: 45,721

Keywords: javascript, react, web development, vite, vitejs, webpack, vite vs webpack, rollup, react vite, vite typescript, vite react, vite react ts, vite react js, vite tailwind, create react app vs vite, create react app vs webpack, vite node js, vite with webpack, Typescript, vite javascript, vite reactjs, vite beginners, webpack beginners, rollup beginners, babel beginners, vite vs babel, vite esbuild, esbuil vs babel, learn vite, learn vite vue, learn vite react, browserify

Id: 9OmnmouE6tw

Length: 18min 6sec (1086 seconds)

Published: Mon Apr 11 2022