1. Introduction to Vue School and Vite
Hello Vue London! I am Alex Kyriakides, the author of The Majesty of Vue.js. I have contributed to Vue.js and founded Vue School. We offer free training material, workshops, and consulting services to improve performance and fix bugs.
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.
2. Vite: A Game-Changer for Vue and Web Development
Today, I will talk about how Vite changes the game for Vue and web development. Vite is a new front-end build tool that significantly improves the development experience. It consists of a dev server that saves code directly in the browser, making it incredibly fast. Vite leverages the browser's native ES modules feature and uses ESBuild for features not yet supported by modern browsers.
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.
3. Dev Server Performance and VT Philosophy
And this is massive if you compare it with the other bundlers. It's about 25 times slower than ESBuild. The dev server becomes slower as an application grows. VT is revolutionary in that regard because it has a very different philosophy on how it spins up the dev server.
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.
4. Vite's Build Command and Legacy Browser Support
Vite's build command builds your application for production, taking care of more things and ensuring it works in all browsers. It is faster than traditional bundling and supports legacy browsers with the PluginLegacy plugin.
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.
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.
5. Vite's Features and VitePress
Vite provides a blazing fast development environment for Vue.js, React.js, Preact, Svelte and more. There are also many other boilerplates and templates you can use with Vite that are created from the community. Vite is also capable of server-side rendering and static site generation, and there's VitePress, a static site generator built on top of 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.
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.
6. Vite, Next, and Vue School
Vite is ready for production, and it's likely to be used by Vue CLI in the future. Vite is great news for Next, and there is an official module called Next Vite that allows you to enjoy a super fast Next dev experience. You don't need to learn Vue from scratch or rebuild your Vue CLI app. Vite means fast or rapid in French, and it's pronounced as Vite. Vue School IO offers the Vue 3 Masterclass, video courses, tutorials, and business services for all skill levels.
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.