Develop with Vite | Vite快速入门 - Anthony Fu • Vue北京聚会 Day 13

hey everyone Vue Beijing thank you for coming  and i'm glad to be here to do the sharing here are links to my slide for both  english and chinese you can scan the code to download one i have put some links  on the slides and you may find them useful okay that starts so i guess many of you have  already heard about it as the next thing replacing other bunkers like webpack well it's actually not  100 true well we are used to build with webpack

and now more precisely we are developing with it today i'm going to present you  a brief introduction to vit the next generation developer tools and i  believe you are finding out the answer after it first of all introduction to myself my name is  anthony fu and i'm a view coaching member and also a member of beats you may also know me as  the author of you use i18le or type challenges i

work on open source full-time and passionate about  improving developer experience and user experience you can find me on github or twitter and my  handle is antfu or check out the links below before i start i want to give a thanks  to all my sponsors supporting my works if you enjoy my works as well you can support  me on githubs i'd really appreciate that

alright so what is beat which is a french word meaning  fast and it's not pronounced as white the initial the initial motivation of  it is that even you the creator of you get an idea of making a dev server with how to  reload for view single file components without a bundler and yeah after  after few days vit comes out

so with the name of fast it has to be fast  right let me show you a quick demonstration of how fast it is on the left hand side we  have create real app and on the right we have it and you can see during an introduction  to that app is already ready and playable while the other one just finished installing its  dependencies in this demo we can see we have over 4 times faster booting up speed improvements  over create read app on a single component

start template and actually that's not  even showing the full potential of it okay i guess you are wondering how could beats  being so fast so first which is opinionated on providing better experience it is as soon as you  use modern browser for development so we don't need to have a complex transparent or polyfills  involved and also since your your browser already

understands atvs module we can even skip the  bundling process and let the browser do it for us we also involved with some optimizations to make  it even faster which i will go through them later we also have a separate build mode for  production that's powered by roll up the difference between the  difference between developer

development and the production make which capable  of having good experience for both of them so let's check it out in traditional bundle  based dev server when we started the server it bundles your entire app and the server is ready  only until the bundle the bundling is finished in a large scale app it could take quite  a lot of time to only get the server ready