Vite in 100 Seconds

Подписаться 3,1 млн

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

50% 1

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
Vite Docs vitejs.dev
Vite SSR Plugin vite-plugin-ssr.com
Learn more about JS Bundlers • Module Bundlers Explai...
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is Vite.js?
- Vite vs Webpack
- Who created Vite?
- How does Vite work?
- Module Bundlers in JavaScript

Наука

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

22 фев 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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.

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

Wish more likes to make this comment on top as I my self know these kind of stuff but want to see it on 🔥 🚢

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

Fireship is so awesome, I can't wait to look at it. Visual applications are exactly what we're building right now, and yet we don't know which stack to choose...

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

Honestly this was confusing but I finally got what I was working on working with some help from several fireship videos.

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

Yes please

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

SSSSSS pls do it. Maybe a 9 minute video...... Go GO GO

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

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

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

...and Vite uses Rollup...created by Rich Harris who also created Svelte. Symbiotic or what.

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

Yeah it’s like a rich-evan-rich sandwich

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

whats the best way to init a svelte project with typescript

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

Love it 👌🏼

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

I thought Svelte Kit used Snowpack. I had read something like that on one of their blogs.

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

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

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

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

@Technoph1le Год назад

You need to choose vanilla in options.

@akj3344 Год назад

What do you build with vanilla js though?

@coldestbeer Год назад

@@akj3344 to minimize the code

@coldestbeer Год назад

@Kirkstrider have you even used vite?

@manojramesh4598 Год назад

@@coldestbeerdo you even know what is Vanilla JavaScript?

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

The man who reads our mind.

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

Yeah😂

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

Like literally

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

😂True

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

I was literally searching his channel for this yesterday.

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

@@samman5980 i had searched this a long before, that dqy he put a video about module bundlers...

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

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

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

Go back to work baka

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

@@watynecc3309 **baka** part killed me xD

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

@@KImtOs *HIHIHA*

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

But there is already the NEXT video :)

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

@@emptychild2005 It was a good joke

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

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.

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

What it really gives beside fast server start? Alsk what about using libraries that have been built with webpack?

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

I tried Vite and I didn't like how it handled sourcemaps for JS and CSS. How is your experience with it so far?

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

Yup. Me also. Its a pain to debug the js. Also css sourcemap is broken right now. Thing i like vite is only the speed. Im using webapck mix and compilations are very slow. That's why i migrate to vite. Problem is only the sourcemaps

@LoryKa Год назад

I will have to migrate an application as well. could you please give me tips on how to do this correctly and as flawless as possible?

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

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

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

I think the big reason everyone is talking about Vite recently is because of how well it did in the state of JS survey

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

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

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

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.

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

I can feel that pain you're talking about 😢 I'm on day 2 of switching to TypeScript

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

A few months in and you will love yourself

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

> as ts is a bit slow in my pc Sadly TSC being slow is a fact of life and we cannot change it 😩 - esbuild it fast but no checking so we still need tsc in the end pain

@just-do-halee7375 2 года назад

Check SWC project

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

SWC also don't support typescript

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

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 !

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

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

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

New Fireship video! Love your content ❤️

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

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

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

I really wanted this. Thank you so much fireship! you are my go to for learning new topics

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

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.

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

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

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

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

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

I'd love to see a more indepth video of how to setup and use Vite! Looks really interesting, and much less suffering to setup then webpack

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

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

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

Thanks for this video, it give me the confirmation I needed to start using vite in my projects

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

Beautiful straight to the point explanation! Thanks for the video

@darkside3ng 11 месяцев назад

your videos are always astonishing and mesmerizing.

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

I'm still new to web dev but your content makes it very inspiring

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

Arguably the greatest series on youtube.

@DuongLe-em4dg 2 года назад

I just search for this video this morning on your channel and now you have uploaded it

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

These are the videos I need for my work colleagues to completely approve my decisions, been waiting for this one

@muhammed.a.k 2 года назад

Never knew about it, fireship is the best. Thanks for keep updating and the way you edit your videos are super duper. Much love from India

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

thank god for vite! i love this so much! thanks for covering it!

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

*It's called vite, not vite*

@greNxNja13 Месяц назад

No it vite not vite

@user-zo2vq3pq7g Месяц назад

Weed 🚬

@DSEEUtkarshSinghParihar Месяц назад

@@user-zo2vq3pq7gyou win

@totoroangelo0013 16 дней назад

its vite, not vite💀💀 cmon thqt is so obvious

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

My company just started using Vite, and it's fkn amazing. Not sure how I worked on the FE without it until now.

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

Wow, definitely going to start using this over normal create-react-app

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

Evan You is a darn genius. First Vue and now Vite. Talk about a resume!

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

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

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

I was waiting for someone to comment on it! hahaha

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

I recently using Vite for my Vue 3 front-end development and I love it!

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

Used this for my Sveltekit app, works very amazingly. Super fast and super slick

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

Never heard of it but it sounds really awesome, have to check it out for my next project

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

vite is amazing, when i was trying svelte i got more roll up errors than js ones, i had given up svelte once due to roll up and was about to do again but then i found vite, loving svelte and vite since

@manofacertainrage856 5 месяцев назад

I was doing WebGL2 examples with Live Server on VSCode and started running into errors importing a module, so I remembered this video and only needed the first 80 seconds to get up and running. Nice!

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

These videos are always right on time with when i want to learn a new technology. Can you make one about the webserver Caddy?

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

My laptop was too slow to use create react app, i started using vite some months ago- JUST LOVING IT! I'd be nice if you could make some tutorial with PWA and service worker with Vite :P

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

Been using Vite on my current project, it’s awesome

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

So excited to create saome tutorials on Vite and Vitest

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

every time i learn something from scratch, he comes up with a video explaining it

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

the size of node_modules when generating a React project with Vite is also 3x lighter comapred to CRA (around 100mb vs 300mb) and the install/build times are just unbelievable

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

#epic #ifinix #vaio #canon #nikon #sony #nokia #sumarecone #mercubuana #windows #samsung

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

When you should that it loaded the actual source code in browser, vite blew my mind. Definitely trying vite out next chance I get for a side project

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

Cool! Thanks for sharing this.

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

How about a video about creating those logos? really beautiful work! I have a feeling you are re-defining logo aesthetics!

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

Love vite, I use it fore everything front-end outside of work👍🏻

@shafraz17 8 месяцев назад

Thanks very much for all your videos. not watched all but all watched are awesome. Even if sometimes i do need to decrease the playspeed to follow, thats not worth an issue compared to knowledge increase.

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

Man those intros definitely make my day

@user-od1nd7zx9q 4 месяца назад

This was great!

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

At first, I went to their website and I didn't understand a thing. Thanks for the video, now I can install Vite confidently.

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

Effing love Vite! Looking forward to a full 1.0 release of VitePress

@vladislavkaras491 25 дней назад

Thanks for the video!

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

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

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

Wow, another fireship upload! Jesus, you're uploading like crazy lately :-)

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

I knew this was coming. Jeff has mentioned it several times in his videos that Vite is awesome

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

wow, that's way cool! I'm going to have to try that

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

Awesome, i'll try it

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

this sounds amazing

@MrRe-sj2iv 2 года назад

Super cool. Thanks

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

this sounds so cool

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

that's funny... I've started my first project with vite yesterday :D Thank you Mr. Fireship

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

I use Vite for everything and it still blows my mind every time how fast it is

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

Can it work with Next JS?

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

@@tobychidi at 1:15 he talks about a plugin that helps with server side rendering Edit: nvm i misunderstood the plugin part

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

@@alperaktas99 Yeah. But it's not Next JS though. That's Vite SSR

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

@@tobychidi ohhh my bad. I thought he meant that the plugin would extend Vite to work with nextjs had to rewatch it again

@adeyanjusegunsamuel2686 Год назад

The only the nextjs team can implement that. Take Nuxt3 does support vite even though it is kind of similar to Nextjs

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

This makes me want to try learning JS, it looks way easier than anything else!

@carlosapa-esd 2 года назад

I've been using vite for a while and it's wonderfull!

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

I hope you’re making bank and I hope you’re happy because, to many of us, you’re a god. Cheers and thanks for helping me get my programming skillset together!

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

Awesome work Sir

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

Whelp I’ll be using this for future react projects

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

Yea Vite is amazing, I was working on vue store front and it is fuuucking slowly but with Vite it will be fine. evan you is amazing person.

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

I watched this video as soon as it came out (as always). Finally the technology I've been waiting for, for 4 years at this point to get away from webpack. Just now found the time to migrate a project over, and it was so much easier then it looks.

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

great video!

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

A follow up with Vitest would be great.

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

I am addicted to fireship videos

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

Liked, already subscribed; keep them coming. :)

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

insane, gonna do practice project with this

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

This guy made me love javascript

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

Finally my favorite JavaScript tool. Vite saved me from a lot of headache & lost time, so I recomend you switch to it.

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

The harsh cut of the music at the end breaks my heart. Please add a fade out the next time. Awesome content! Ty!

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

I fricking love this guy

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

Can you please do Solid.js in 100 seconds?!? You always talk about how fast and awesome it is in other videos, but have barely ANY dedicated content on it. 😟 Thanks for everything else! You ROCK! 🚀

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

Great video as always! After watching it I questioned myself why and when to use Vite and when Next.js?

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

That intro was incredible. I didn't make it 3 seconds before I hit the comments

@fajarsetiawansiagian Год назад

thanks for the intro. look like to try move from webpack to vite

@Daaboo Год назад

I hated react before because it was a messy install and so bloted with junk folded etc. With vite you get a clean setup that's much easier to navigate! We need more stuff like this to speed up coding

@nztchris313 Месяц назад

I love you channel , you don t know what certain stack does ? boom Vite in 100 secs

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

Great video, also looking forward to Tauri in 100 sec

@nate32396 Год назад

I recently moved my react app from CRA to Vite, it was a pain to do, but I’m so glad I did it.

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

Very timely. I had JUST been wanting to look into this. Probably the State of JavaScript did it

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

Crazy 🚀 Yesterday I was thinking what is Vite 😎

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

Been using vite for all my projects, it's always fast no matter how huge my code is

@TCG-BOI 2 года назад

I swear, your videos need to be used by universities and colleges to get better explanations on languages and technologies. Seriously, THE best content.

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

My favorite part of Vite is that the dev command results in a bundle that is different from the build command. Love finding errors after building for production. Thank you JavaScript :)

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

Well after some time I started to simply ship dev version, and no fucks were given at all.

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

What..? Dev builds and production builds are wildly different in almost any language and toolchain. This is not specific to JavaScript and definitely not specific to Vite either.

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

@@JasonEfstathiou that shouldn't be the case, the code should be the same and run the same to avoid misleading bugs. It makes no sense to let the programmer think their stuff works at dev time just to throw them off at testing or production with a bug that doesn't occur in development environment