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

As web developers, we always struggle with dev server and HMR performance as well as building production bundles that take forever every time you push to CI/CD. Vite solves the performance issue by utilizing ESM (ESModules) using the help of the awesome bundler ESBuild, which going to give superpowers to your projects compared to other bundlers like webpack, babel-loaders, or maybe browserify. In this video, we'll cover how vite works and what is ESM modules for dev-server, how to create and set up a project using vite-cli as well as do an in-depth comparison between vite, webpack and create-react-app.

⭐ Timestamps ⭐
00:00 Intro
02:14 ESM (Vite) vs Classic Bundlers
05:02 Creating a project using Vite create-cli
06:16 Vite project structure and config with typescript
07:43 Vite is super fast with HMR
08:53 Vite vs Webpack [HRM]
12:20 ESM (ESbuild) Vs Webpack on browser
14:18 Vite vs create-react-app dev server start
15:43 Vite vs Webpack vs CRA Production build

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[babblebey]

I got started with ReactJS ⚛️ not too long ago, I couldn't believe I waited a more than 45mins for the create-react-app to fully set-up. Later I found Vite, I have not looked back ever since. Great Video 👍🏾😊

[LordFullStack]

Evan You, is a true gem for web developers .

[voidmind]

Running the 3 different build at the same time is not a valid benchmark, because the processes are competing for your CPU. It would have made more sense to run the one after the other.

[DIN_A]

You are constantly delievering the best content! Love it.

[inasuma]

i recommend every programmer learn the Rollup API and build their own apps that way. Rollup is very straightforward and only needs to be as complicated as you want it to be (vs. webpack, where it's just always complicated lol).

[remcokersten]

Wow, thank you for your amazing explanation!

[CheulongSear]

my current company is using vite. And it is awesome, light weight and super fast. But there is hard to figure it out when there're errors during configing to make it work with some libraries.

[isaac]

Vite is a great project starter. There are no issues when I run npm install and create my project.

[HotelSeptember]

Thanks for the intro. Would have been nice for more information on the impact of the final product Vs bundled file. You speak about the dev experience being fast but in the grand scheme of things, the production application is what matters. What improvements are made here by using Vite?

[digitnomad]

Vite:68.84s vs Create React App:75.47s vs webpack:84.22s isn't that bad. thanks for sharing.

[СэмФишер-хд]

"we need more frontend app builders, milord!"

[luisbrazilva]

I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.

[adamblade]

I take it this is more for new projects, I've tried switching an old react application (3 years) from webpack to vite, but I'm getting a lot of strange errors from the libraries.

[mdkawsarislamyeasin]

We need vite.js tutorial full playlist 🙂
How to customise vite?

[monarchgamr]

I have an issue with vite-react in vscode, specifically about auto imports

When I setup jsconfig base url n paths, vscode doesn't work with it properly but webstorm works well and obeys the config

[Emanuel-ybqk]

Then, thanks to Vite, it is no longer necessary using webpack?

[honkhonkv]

Vite = fast in french and we pronounce it "veet".

[anandca]

Bro do you have scroll issues on chrome when using linux ubuntu

[tylim]

vite cant work with dynamic module out of the box and I have no idea how to configure it. Create react app at the other hand works out of the box

[ragtop]

Vite, pronounced "veet" (sounds similar to "feet")