How Vite Changes the Game for Vue and Web Developers

Hello Vue London! I hope you're enjoying the conference. I am Alex Kyriakides. I'm the author of the first book on Vue.js called The Majesty of Vue.js which I wrote when Vue.js was version 0.something. And over the years I have contributed to Vue.js and the ecosystem. And I'm the founder and teacher at Vue School. I'm based in Amsterdam and you can find me on Twitter and GitHub under the username of hoodlicks.

Vue School is the first training platform for Vue.js. We started back in 2016. And we have over 500 video lessons. And since we offer a lot of training material for free, we have all the fundamental courses for free. We have over 120,000 registered users. And these amazing people that you see here, they work with Vue School either as instructors and teachers or as contributors. At Vue School, besides video courses and tutorials, we do workshops, which are either in person or online in our virtual classroom. And workshops is a great form of training for learning something, a new technology or a new topic, very quickly, typically in a day or two. And all our workshops are live, intensive and hands-on. For companies, we help them by providing consulting and development services. And we are particularly good with helping improving performance and with fixing nasty bugs. So, if you need any help with that, feel free to let us know.

Now, today, I am going to speak to you about how Vite changes the game for Vue and web development. In this talk, I will cover what is Vite, why Vite is so great and why all the fuzz, how to use Vite with Vue or even React, what is VitePress, and in the end of the talk, I will answer some of the frequently asked questions, like, for example, what's happening with Vite and Nuxt.js. If you are interested in the technical insights, check out this excellent talk by Evan Yu from Vue Toronto. Here he covers a lot of information on how Vite is built, why it is built this way, why they made it. It's a very interesting talk. I definitely recommend checking it out.

OK, so let's get started with what is Vite. Vite is a new front-end build tool that significantly improves the front-end development experience. And what is Vite's goal? It is to make developers more productive. And how do you make developers more productive? By making developers happier. And how do you make developers happier? By making their tools faster. That is a quote from Evan Hugh, the creator of Vite. But, OK, what is Vite exactly? Vite is a command line tool that consists of two parts, a dev server and a build command that bundles your code with Rollup for production. The dev server is the tool that you use while you're developing your application. And as you understand, the build command is what you run when you are ready to ship it.

Let's learn more about Vite's dev server. Now, while you develop with Vite, your code is saved in your browser directly without being bundled. And that's what makes the Vite dev server so fast. It is like opening your local files from your computer in your browser. To understand how Vite's dev server look like, think of it as UCLI, but way faster. When we say way faster, we really mean it. The Vite dev server starts in less than 300 milliseconds, and the hot module replacement takes place in less than 100 milliseconds. And Vite achieves that by leveraging the browser's native ES modules feature. In this image, you can see that all the major browsers, here, they support ES modules in their latest version. And this is also one of the reasons that we get an awesome tool like Vite today and not like a few years back, because we needed to wait for modern browsers to evolve and support features like this one in order to make our developer experience faster and nicer. Now, for features that Vite needs, but modern browsers don't support yet, Vite uses a tool called ESBuild. And it uses ESBuild for supporting bare imports, for implementing the hot module replacement, and for having support for tools like Typescript or JSX. I didn't know of ESBuild before I look into the Vite Dev server, and I figured that it is written in Go and it compiles to native code. And that it uses parallelism heavily. And I found this benchmark very interesting, and you can see here that ESBuild is able to bundle or to compile a large JavaScript code base in 0.3 minutes, a JavaScript code base in 0.37 seconds.

And this is massive if you compare it with the other bundlers, but see that it takes about five times more when ESBuild is running with one thread, so without the parallelism. But the next fastest option after ESBuild with one thread is Rollup with Terser. And this takes 36 seconds. It's about 25 times slower than ESBuild. And then Webpack is a bit slower, 41 seconds. And like the slowest solution here would take 120 seconds.

And here you might say that Alex, like 40 seconds, one second, like why does it matter? It's just some seconds. But it does matter because this is how much you would have to wait in order to speed up your development server. So every time you run, I don't know, npm run dev, you need to wait for this, let's say 41 seconds, but now it will just take half a second. And especially if you're tweaking your dev server, if you're making some like root changes and you need to stop the server, run it again, stop the server, run it again, then this can be like a pain for the developers. But yeah, with VSBuild, it's way, way nicer. And if you think about how many times every day you start your dev server, I think it would be like easy 10 times a day. So if you think that this is like a one minute step, then this gives you 10 more minutes every day, which is massive.

Okay, so which dev server solves the common enterprise problem? And the common enterprise problem is that as an application grows, the dev server becomes slower. And that happens based on how the typical bundlers work for development. So let's take this bundle-based dev server as an example. When we are running npm run dev, or whatever command, the bundler gets to start from an entry point, for example, your main.js file, and then it will scan for all your routes. And for every route, it will go in, it will see what components and dependencies you are importing, and it will go like all the levels in depth to find the dependencies, load them, transpile them, put them together, and make this big bundle. And then it will give the server-ready signal, which means that you can visit your application in the browser. And this is like perfectly fine when you have three routes and like 50 components, but if you have a couple of hundreds of routes and a thousand of components, then this can take easily half an hour. And VT is revolutionary in that regard because it has a very different philosophy on how it spins up the dev server, which you could say that it is reversed of how traditional bundling solves this problem. So notice that it starts with the server ready, like this is the first step. First step is like, server is ready, you're good to go. While this will be the last step. And then it waits for the HTTP request and this is your entry point. So if you open your application in the browser in the homepage, the entry point is the homepage. If you open like the user page, then that would be the entry point. And from that entry, it will figure out which route this is. So for example, the homepage, and it will load the components and the dependencies only for that route. So even if you have 1,000 routes and like 2,000 components, it will still be super fast because it will only open this one route and like 30 components that you use in that place.

And then when you click in your dev server on another link, then it will like find the new route and it will load the new dependencies, which is really awesome, if you think about it. It's a very smart way to do bundling.

Okay, so let's go next to the Vite's build command. And this is the command that you will run when your application is ready to go to production. Vite has a bundling process here, and this takes place using the bundler that is called Rollup. If you wonder why Rollup and not something else, that's because Rollup is the best performing Javascript based bundler, in terms of build speed, tree shaking, and output size. So that's why.

Vite's build command builds your application for production, and this takes longer than dev, because here, it needs to take care of more things, and then this needs to make sure that it works not only in modern browsers, but everywhere. But don't worry about this, because you only build once. So you have your dev server running all day, every day, multiple times, and once in a while, you need to build it and upload it for production. And still, when you build, it is way faster than traditional bundling like Webpack and Vue CLI. And as I mentioned, if you use Vite, it doesn't mean that you can only support modern browsers. You can even support legacy browsers. There is a plug-in called PluginLegacy, which you can install on Vite, and then you will have support for all browsers, including our old pal Internet Explorer. So if that's important for your company, you can even do it that in Vite.

Okay, let's do a quick summary of what we saw so far. Summary of Vite. Vite has a super fast development experience, and it has a great bundle output using rollup when building for production, which is also supported by legacy browsers, if needed. So Vite is awesome.

One common question is if Vite is made for Vue.js, and that's because it is made from the creator of the Vue.js framework, M1U, but the answer to that question is no, and to be honest, that will be unfair. Imagine that if you developers, they had to wait half a second to start at a server, but then React developers have to wait 30 seconds or sometimes like 20 minutes to work. That would make it a bad monopoly for Vue.js, but no, no, I'm kidding now, that's not the case. Vite is available for all the JavaScript frameworks. And actually, Vite is framework agnostic, which means that Vite provides a blazing fast development environment for Vue.js, React.js, Preact, Svelte and even more.

When you're going to create a Vite application, you run this command npm init vite at latest, and then you specify the project name, and then you can choose what framework you want to use, Vanilla, Vue, React, Preact, et cetera. And these are just the official plugins that ship within Vite. There are also many other boilerplates and templates you can use with Vite that are created from the community.

I stumbled upon this example, or this compile on Twitter. This is the CEO of Repl.it, and here they compare the Create React app versus the Vite React dev server. So look at this, I was not from scratch. On the left, we have the Create React app, on the right we have the Vite React. Vite React starts a bit later, like the click play a bit later, but look at how fast it is, this is record time. Here we can already see the React application running, while on the left it takes a while. Actually, we need to wait for almost the end of the video, about 40 seconds, to see just the application running. So this is a massive difference, and fun fact, after they made this comparison on Twitter, I think a few months later at the Replic, they replaced how they do the bundling for React to use Vite React. So now if you make React applications on Replic, they are way, way faster. And I think they also use Vite now for most of the JavaScript apps you can run on their website so that's a great use case where the dev server could even improve your production performance. But this is a rare use case of course.

Now Vite is also capable of server-side rendering and static site generation, which is really great news. There's also VitePress, which is a static site generator built on top of Vite. And VitePress is great for creating documentation and blogs, it's really, really fast. And it is like ViewPress, but lighter and faster. And I want to clarify that it is not coupled to Vite projects, so we don't need to have a Vite project to use Vite, VitePress, because VitePress can be used in any JavaScript project, it just uses Vite under the hood. So it can be inside a React app, a View app, a Vue CLI app, whatever. And VitePress is still an early walk-in progress version.

But there are some websites that use VitePress already in production, including the official Vue.js blog and the Vite.js website.

Okay, let's hit some frequently asked questions on Vite. Is Vite ready for production? Yes, it is, the Vite 2.0 stable was released on February 2021. Will Vite replace Vue CLI? Well, it's most likely that Vite will be used by Vue CLI under the hood instead of the current Webpack setup in the future. How about Next? What happens to our beloved framework? Well, Vite is great news for Next, and according to Evan, now Next can have a simpler core and focus more on higher-level API design and ecosystem modules. There is already a way to use Vite in Next too. There is an official module called Next Vite. And it's very easy to install it. You add the dependency, you change this setting in the next config file, and that's it. You can enjoy a super fast Next dev experience with Vite. So, check this out if you're using Next and want to experiment with Vite on that. And according to Sebastian Sopin, the co-author of Next, Next Vite will support Vite by default, which is really exciting.

Now, do I need to learn Vue from scratch? No, Vite doesn't change anything in regards to how you write your Vue.js code, so no need to learn anything new there. Do I need to rebuild my Vue CLI app from scratch? The answer to that is also no. It's likely that there will be a tool that will allow you to migrate your Vue CLI application from Webpack to Vite when the time is right. Why you pronounce Vite, and not Vite? That's an excellent question. I thought it was called Vite when I first saw it. But this is Vite, and it means fast or rapid in French. And when I learned this, it immediately clicked to me, because when I was a child, my mom used to say, Vite, Vite, when she wanted me to do something fast. And I doubt she knew that is fast in French, but the way she said it and the sound of it, it really sounds like a Vite, Vite, like big week. Let's go. Yeah, that's it.

I'm Alex Kyriakides, from Vue School IO. Vue School IO is popular for the Vue 3 Masterclass. This is a course, a video course, where you learn Vue.js by building a real world application from scratch. We build a complete forum and we teach you Vue.js and the best practice in the ecosystem, including how to use state management, permissions, user authentication, bundling, security, and whatnot. So I definitely recommend this course if you are looking to step up your Vue.js game. This is an advanced course, but at Vue School we have video courses and tutorials for all skill levels. We have fundamentals on Vue.js and the ecosystem, on Nuxt, ES6, modern JavaScript testing, and we also have intermediate and advanced courses for all the skill levels. And lastly, we also offer business services at Vue School, so if you need help with development, consulting, or team training, feel free to reach out to team at vueschool.io. Thank you very much.