Vite in 100 Seconds

Vite is a JavaScript build tool that makes it faster and easier to build web applications. It's similar to tools like Webpack, but relies on modern browser features like ES Modules to simplify and speed-up the build process.

#javascript #webdev #100SecondsOfCode

🔗 Resources

🔥 Get More Content - Upgrade to PRO

Use code lORhwXd2 for 25% off your first payment.

🎨 My Editor Settings

- Atom One Dark
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- Vite vs Webpack
- Who created Vite?
- How does Vite work?
- Module Bundlers in JavaScript

[mariosebastian]

can you do a video that explains server side rendering vs client side rendering vs static site regeneration vs incremental generation? Static sites vs client rendered sites are easy to understand, but the in between of all the watering/hydration generations are confusing.

[mountainslopes]

I love that Svelte Kit uses Vite under the hood. Makes for such a good developer experience

[saketaryan]

Evan you is really a gift to the javascript world . Full respect for this guy !

[nyashachiroro]

Now I use Vite for everything, even vanilla HTML, CSS and JS. Its amazing. Great video by the way.

[javiasilis]

I strongly recommend everyone to give Vite a shot. I migrated a relatively big appilcation (263 K lines of code) from Webpack to Vite as I was taking between 3 - 4 minutes to only START the dev server. After migrating to Vite, I slashed it to 5 seconds.

Note: It didn't come without its issues, such as CommonJS support and refactoring of import and require statements. But it was worth it.

[KImtOs]

I HAVE BECOME ADDICTED TO YOUR 100 SECONDS VIDEOS, ALWAYS WAITING FOR THE NEXT

[miguelus]

It's impressive how 1 hour ago I read about Vite for the first time, and now this video pops up in my feed. I love this 100s videos

[thedrunknmunky]

You made me switch to TypeScript and honestly, it was such a pain for the first 3-4 days. Now, just 7 days later, I don't think I can go back to vanilla JS. AND as TS is a bit slow on my PC, I'll be sure to check Vite out. I need that fast feedback loop.

[reactwind]

this is perfect timing, I was like dude why the 100 seconds of vite isnt a thing.

FireShip: Post a video about it
Me: lesssgo

[shelomoh]

I don't know what I'll do without this channel, most of the time all I need a 100seconds clear explanation!! thanks

[louisdu]

THANK YOU ! My god Vite is amazing. I had a pretty big Laravel / Vue3 project that took 20 minutes to npm run hot (w/ sourcemaps) and about 10 seconds every hot reloads (on a 12 core server). Now it takes about 2 seconds to boot and half a second to update. It's incredible ! This + working on a remote machine means I can have my dev website on another PC and have it reflect the changes from my IDE in less than a second. incredible !

[qonra]

I put together a rails+hotwire+vite+tailwind app recently and honestly this is the easiest web dev has been in years, I feel like we're finally getting away from the mess that web dev became half a decade ago. Everything seems to be consolidating and it's making the development experience a whole lot better.

[SirDamatoIII]

Kicked out webpack last week. Vite is ridiculously awesome, especially with a VueJs project. Was a sinch!

[thisissyedbasim]

I really wanted this. Thank you so much fireship!

you are my go to for learning new topics

[gustavo]

My favorite part of the video is when Jeff starts talking, then when he continues talking and finally when he talks at the end.

[EthanStandel]

You hyped Vite like a week or two ago. I tried it and immediately fell in love. I've already converted the CRA/Craco app I was making

[sibyl]

Evan You didn't disappoint with vue and now with vite. Both of these tools are awesome.

[thebigchainsaw]

Talking about packages, the 'flash' really shows his off in your animation (0:56)

[codethinh]

Your timing is impeccable! I was just looking into this.

[adamturaj]

New Fireship video! Love your content ❤️