So yeah folks, what I’m going to talk, be talking about today is how much Vite can help you speed up your development workflow. And just wonder like how many people in here already make use of Vite in their day to day. All right, so it’s a vast majority. And how many people are using Vue CLI and have plans of moving to Vite sometime soon? Awesome. And who has haven’t had the opportunity to use Vite yet? Okay, so the way I’ve organized this talk is hopefully that’s going to provide value to all three groups because I’m not going to be diving really deep on the technical side in any areas, while also I’m gonna be providing some pretty cool things that honestly impress me about Vite that hopefully, even if you are using Vite in your day to day, maybe you haven’t heard of those so I’m gonna be covering that too, right?

So yes, my name is Felipe Flor and I included the Brazilian flag there 'cause, yes, I’ve moved from Brazil to Canada. And I included this picture over here because I’m pretty happy to say that I’m the proud owner of the Vuenicorn from VueConf 2019. There was this competition where anybody could participate and my submission got first place so I was awarded with the Vuenicorn and I cherish it to this day. So it was an amazing gift. You can also see my friend Adam. The guy is a total wizard of coding and has taught me so much about . So just wanted to give kudos to him too. The three of us 'cause I’m including the Vuenicorn there as well, we’re all members of Vehikl. So we are a web development consultancy company based in Canada. We specialize in web and mobile solutions. You might have seen our booth over there, so if you wanna check us out, please don’t hesitate to go there. We would love to talk to you as well.

And yes, I am truly honored to be standing here today and having this opportunity to give something back to our community that has done so much for me already. It’s truly a dream come true, and especially because talking about Vite, which is a thing that I’m pretty pumped about, is honestly, yeah, it is a dream come true and I really appreciate this opportunity. Another thing that I wanna point out as well is that don’t see this presentation as if it’s going to come from a perspective of someone who is an expert to build tools, because that’s not who I am. See there’s a like an eager web developer that really enjoys Vite and uses Vite a lot and he just wants to share a little bit of why he likes it. And yeah, so how I’m going to be doing this?

First I’m gonna start by explaining what is Vite and I’m gonna compare with some alternatives out there. Then I’m gonna go towards explaining different features that I really liked about it and hopefully by the time that chapter two is done you’re gonna be pumped and you wanna try Vite out. So I include that third chapter in here where I’m going to be explaining how you can make use of Vite, be it in a brand new project, or I’m gonna include a section where I’m going to convert a Vue CLI project to make use of Vite. Alright, so it’s a lot of things to cover and I only have 30 minutes so I need to get going. Okay, so what is Vite, and Vite is effectively a build tool, and I like to compare it to, for example, Webpack or Parcel. And the whole idea is that it provides a series of resources of automation for you. So for example, it can minify your code, it can run a web server for you to to apply a change in development. And one of the things that I like about Vite is that it has this very strong focus on being easy to use and speed, like speed is literally in the name. You might have heard of this before but the name Vite comes from the French word for quick or fast.

And we employ some different strategies in here to achieve those incredibly fast speeds. One of those is a different strategy when we’re trying to serve for development. A more conventional approach that you might have seen when you’re talking about Webpack, plus Webpack Dev Server, would be to bundle up your entire code base before serving to the browser. But what Vite does is it leverages the fact that modern browsers nowadays know how to understand ECMAScript modules themselves. So we can bypass this extra transformation step of entire application and instead we can just do some minimal bundling, that there is some pre-optimization bundling, I’m not gonna go in too much detail, but most of the heavy lifting is done by serving ES modules directly to the browser. So this is lightning fast. I’m gonna include it as logic here, I’m gonna compare with Webpack and you’re gonna be able to see the difference. Of course serving ES modules directly to the browser adds some HTTP overhead, which isn’t it a big deal if your server is in the same computer as your client, which is the case for development. But when we’re talking about production, this HTTP overhead would be detrimental. So that’s why Vite follows a totally different strategy for production builds that is that more conventional of bundling up your entire code base into a few files. So having these two approaches depending on what you wanna use it for is one of the reasons why I really appreciate it.

So let’s compare it a little bit with Webpack. And the reason why I chose Webpack is because it’s a very well known huge tool and it has an established following. So yes, definitely Webpack is older than Vite. It has been around for over a decade and it’s, like it has withstood the test of time, right? Vite on the hand is younger, it has been around since 2020 but already has an immense following behind it. Another thing that I’d like to differentiate to those two, and pardon me, I might be oversimplifying things, but I like to say that there’s the number of assumptions that the Vite tool is making about you is another point of difference here. Vite makes some more assumptions about you. And so Vite assumes that that you are a modern developer, and because of this it comes preconfigured for a lot of things that modern developers care about. Webpack makes fewer assumptions about you. So one of the consequences of that is that, for the same project, if you were to compare the configuration file, the Webpack configuration file would be drastically larger than the Vite one because a lot of the heavy lifting is done for you already through the pre-configurations. Of course there is a downside. Vite requires you to be using modern JavaScript while Webpack does not, right? But if you are a modern developer, Vite really works incredibly well for you. Lastly, it is the point that I was covering on the previous slide. Webpack plus Webpack Dev Server requires bundling of your entire code base, even for development, while Vite for the most part most of the heavy lifting is done by serving ES modules directly to the browser.

So it’s so fast. And when I was putting together this slide, I was working on a new version of my portfolio website, and I felt like, hey, maybe this is gonna be a good opportunity to pair those two. And what I’ve did is I have the exact same project on both sides. On the left head side its using Vue CLI which, Vue CLI uses Webpack under the hood, and on the right hand side it’s gonna be Vite. So if I try to start to the website, oh yeah, and full disclosure, I consider doing live coding but I don’t have the guts. So huge respect to people that do it. I prerecorded videos. So yeah, so if we started the server over here, you can see that Vue CLI like Webpack took 1500 milliseconds to compile my JavaScript and 80 milliseconds to compile the CSS. It’s still pretty fast. Like Vue CLI is awesome tool as well. But, so the site is working pretty fine, that’s okay. But how would that compare with Vite? So starting the exact same project using Vite as a build tool, look at, almost I couldn’t even finish the sentence, and Vite took 170 milliseconds to build everything right? So we are talking about a difference of 10 times the speed. So this is one of the points that really brings the community together regarding Vite. But I wanna argue that personally like this speed is not the main selling point of Vite to me, because like you, you saw that Vue CLI was also pretty fast. What I really like about Vite are all the great features that it brings. And please do keep in mind that for the sake of time’s sake, I’m gonna be do just doing a next-sized overview of the different features. It’s not meant to be an in depth course of them, but yes, if you do wanna talk more about those, I would love to to talk with you, like I’m gonna be here all day so please reach out. But yeah, it’s gonna be just like tiny bits of each feature.

So what are some things that Vite brings right out of the box that I absolutely love? Hot module replacement is definitely one of those. And if you don’t know what hot module replacement is, it’s what allows you to see immediately the result of the changes in your code base. Like you do some change in the code base and that gets immediately reflected in the browser. It’s pretty fast. Another thing as well is that Vite comes pre-configured to support PostCSS right out of the box. So for example, very popular CSS plugin would be auto pre-fixer. You can just install auto pre-fixer directly, you don’t have to worry about loaders, and add H2O PostCSS configuration, then you’re good to go. Likewise, if you’re still using CSS pre-compilers, the same applies. You don’t need to worry about CSS pre-compiler loaders. You can just install, let’s say SASS OS and start using it and Vite is gonna handle that for you. And a third point is, and people mentioned this this morning and I totally agree, I strongly recommend you to make use of TypeScript in your code base. It drastically reduces the chances of bugs in your project and increases maintainability, and Vite comes pre-configured to support TypeScript transpilation, and I was very careful to mention transpilation because let me just expose you to one thing real quick. So let’s go back to that project, and yes, I do like Disney music by the way but that’s not the point of the talk. But like I included the project cards in here, and this is a Vue 3 project, and this project cards component is made to be a reusable card. I provide the detail of side projects that I have and it gets rendered as a project card.

And notice that it takes a prop of title, okay? And if you go to the definition, title is a required prop of type string. Just a quick segue, note that I’m using TypeScript, so it’s Vue 3 TypeScript. But if you were to check my Vite configuration file, there is no mention of TypeScript in here. So I just wanna drive that point that TypeScript support is right out of the box. But let’s go back to the to the components. Alright, so it takes a prop of title and title is meant to be of type, string. So what would happen if I go back to where this component is being used and if I were to provide another value to the title. So let’s provide something else there. As soon as I save, hot module replacement has immediately updated the value in the browser. Okay, so it’s that instantaneous feedback loop is one of the things that Vite brings to us right out of the box. But the main reason why I decided to show this part of it here is what would happen if I were to provide a prop that violates the type safety rules that I have established, for example an array of numbers. Okay, so notice this folks: Vite is not complaining, okay? So all that’s going on right now is my application is rendering the array syntax as regular text. But on the Vite side everything is fine and dandy.

So Vite is not performing type checks for me, but notice that my IDE is complaining. My IDE detected that I’m violating the type safety rules that I’ve established, and it’s saying that an array of numbers cannot be assigned to a prop of type, string. This is exactly one of the assumptions that the Vite team is making about us. They assume we are modern developers with modern tools. And those tools that we have available to us are already providing the type safety that we need. So there is a need for Vite to have this additional overhead of performing the type checks for us, right? So Vite can focus more on speed. Another point that I wanna drive as though is that even if you don’t wanna rely on your IDE, there are CLI tools, like for example for Vue projects Vue-tsc is amazing to perform type checks for you. And a classic pattern is for you to do the Vue-tsc check before building for production. So by having this into here, as soon as I try to build my application for production, I’m gonna get an error and Vue-tsc is gonna tell me exactly what’s the reason. But what if that’s not enough? Like what if you really want Vite to be performing type checks for you? Is there anything that you can do about this? And the answer is yes. You’ve got to be seeing this pattern showing up over and over again where Vite is gonna make some assumptions about you. But if you are to deviate from those assumptions, you can, and it’s gonna be like a one-liner change in your configuration file or maybe adding one plugin to the project. To get Vite to perform type checks for me, all I need to do is install one plugin.

So what I’m going to do here is I’m going to install one of the recommended plugins by the community, which is the Vite Plugin Checker. It’s an amazing plugin. I don’t know if people involved Vite Plugin Checker are here, but I wanna give a shoutout 'cause it’s pretty good. So installing the Vite Plugin Checker. Once it’s installed, all I need to do is go to my Vite configuration and add to my array of plugins. And please note that Vite checkers have a bunch of different options to support including running Vue-tsc for me. So let’s enable the slack to to run Vue-tsc, and that’s it. So this is enough for us to have type checks. So if I restart my server, look at that, now we get a very nice error message showing up on the browser that tells me that I’m violating my type safety rules just like that. And it even has a link that I can click that takes me exactly to the problematic point in the code base. So it’s just like that folks. They make some assumptions about us but if you wanna add additional features it doesn’t take long. This is one of the reasons why I like Vite. So as soon as I fix the error and I save, there we go. The error is gone. So just to recap, when we’re talking about TypeScript in Vite, yes, transpilation is supported right out of the box. But Vite will not be performing type checks for you by default. But if you want to enable that, you can, and one of the ways you can do this is by enabling the Vite Plugin Checker in your project. And that’s it.

All right, so this is it for the TypeScript area. I wanna talk about some other features as well like code splitting. And if you haven’t heard of code splitting, the concept is effectively instead of serving your entire JavaScript, in this example, like as one giant file, you can split it into smaller chunks and the concept of code splitting usually goes hand in hand together with another concept called lazy loading. And the idea is you split your code into a smaller chunks and you only require the client to download specific chunks as they’re actually required. So how do you do code splitting with Vite? It’s just using imports as a function, that’s it. So if you use dynamic import, Vite is going to see what module you’re trying to import and we will automatically extract that into a chunk that contains that part of the information. So let me demonstrate. A classic use case for lazy loading and code splitting is when we’re talking about routes. So right here on the left hand side, I’m not doing any code splitting at all. The consequence of this is that regardless of where the user is, they will have to download all the pages in my app. They are immediately gonna download the home components, page A components, page B components, right? But if I want them to only download those components as they’re trying to access the respective page that they represent, I can just do this. So look at the change, I’m no longer importing at the very top of the project. I’m using import as a function on the route definition itself. So routing is the classic example for code splitting.

But I wanna clarify that you can actually do this with anything. So I wanted to show an example beyond routers, right? So in here I have like some heavy module and I wanna run a function from this module and alert the output of that function to the user. Right now some heavy module is always being downloaded, right, but if I do the change to be this, so pay attention to the alert, my results function, I’m going to simply import some heavy module now inside of the alert, have alert results function, and Vite is going to detect that the some heavy module is being dynamically imported and it’s gonna extract that into its own chunk, and Vue is only going to force the user to lazy load that when they click on the button. Doing code splitting and lazy loading can have strongly drastic performance benefits for large scale apps. So I strongly recommend getting comfortable with those. Talking about imports, another thing that I really appreciate that Vite brings to the table is this resource called glob import. And what is it, effectively, it’s a resource that allows you to import multiple modules in one go.

So I wanted to demonstrate an example. So I’ve put together a component that would render inline SVGs for me. So I would pass the name of SVG and it would render that. And as part of the implementation, I’m importing all the SVGs this component is made to support into a module collection called SVGs available. So please note that all I had to do was use import.meta.glob. And then the idea is that this component would be able to be used like this where you just add the components to your template, you pass the name of SVG, and now it’s gonna render that SVG as an inline SVG. The whole point of this is because inline SVGs are awesome, but if you’re not doing something like this, then it can really edge too much clutter to your code base. So that’s one alternative to do that. I do wanna point out though that you actually don’t have to reinvent the wheel. If you are working on a Vue project and you want to use inline SVGs, there is a plugin for that. So big shout out to the team behind Vite SVG Loader. It’s a pretty awesome plugin and it’s very easy to use. You just need to install it, add your array of plugins in your Vite configuration file and just like that, if you import, you can just import your SVG normally and use it as a Vue components, and it’s gonna, it’s gonna be a new inline SVG.

So you got all the benefits of inline SVGs whilst still keeping your code base clean. All right, so yes, there are so many neat plugins. We covered a couple of them like inline SVGs, type checking, supporting specific frameworks like Vue, but folks, there are so many more. Like I actually, I had a couple of more to mention. I could do like a whole hour just of plugins that I like. But I do need to move on. One thing that I wanna mention is there is this officially curated lists of Vite related resources called Awesome Vite. I included the link over here, but if you Google, Awesome Vite is the first result as well. It’s awesome. And there is a whole section there for plugins as well and every single plugin that I’ve mentioned today is in that list as well. All right, so hopefully by now you’re kind of like, hey, Vite looks pretty cool, I wanna try that out. So how do we do this? To create a new project, all you need to do is use the boiler plate wizard. So if you do PMPM Create Vite, that’s going to start the wizard. And they’re gonna ask for the project’s name. You can give it to there. Then it’s gonna ask what framework you wanna use. And I mean it obviously gonna be Vue, so just gonna pick Vue in here, and then whether or not you wanna use TypeScript. That’s it folks. We have a brand new Vue 3 TypeScript project ready to go with Vite pre-configured for it. And I do wanna hit on a specific point. Take a look at this screenshot. The boiler plate wizard was asking me which framework I wanna use.

And this is very important because we might be inclined to believe that Vite was made specifically for Vue JS, because Evan You, the person behind the creation of Vite happens to be the person behind the creation of Vue. But this is not the case folks. Evan You and the Vite team have made a very active decision of making Vite completely framework agnostic. So yes, it works amazing for your Vue projects, but it’s also an amazing Vue tool for your React projects as well or your vanilla JavaScript projects. Right, and how about converting existing projects to use Vite? There are a couple of things that I think you need to consider before following this decision and I included them in this slide over here. So one is that Vite requires modern versions of Node, and we all have worked on legacy projects, and I know that sometimes the reality is that the project is running on another version of Node. So you and your team needs to do that investigation. Like do you need to Node before even considering bringing Vite, right? Another thing as well is that Vite targets modern browsers. All the Evergreen browsers and all the important browsers are fully supported. But if for some reason your product needs to be supported by some other legacy browsers, then you do need to do an additional investigation before figuring out whether or not Vite is gonna be a good decision for the team at this point. But I do wanna point out that there is a plugin called Vite Plugin Legacy that might help you out there.

So it’s just a, it’s an investigation that you’re gonna need to do with your team. Furthermore, it’s other integrations as well. Maybe your build tool is making use of some specific third party resources that don’t immediately translate in the Vite space. So you also need to take that into account. But let’s assume that you and your team looked over this and you’re like, yes, I wanna migrate to Vue. So because this is a VueConf, I thought it would be nice to include A Vue CLI, each of Vite tutorials here. So it’s gonna be a few minutes, but I think it’s gonna be interesting. To do this demonstration, I have spun up a Vue CLI project that has Vue 3, it has Vue Router, it has Vue X. It has CSS pre-compilers and it has TypeScript. So like a bunch of Pokemons there. And we’re gonna convert to this project use Vite. So the first thing we’re gonna do is get rid of everything related to the Vue CLI. We don’t need those anymore. Also Vite supports CSS pre-compilers right out of the box. We don’t need to worry about loaders at all. Okay, next we’re gonna, I mean obviously install Vite, but we also need to install the plugin that is going to allow Vite to understand the syntax of Vue 3. So it’s the @vuejs-plugin-vue. So once those are installed, we can update our script. If you wanna serve a development server, you just need to run the Vite command.

And if you wanna bundle for production, you need to run the Vite build command. Next, to make use of the plugin, we need to create a Vite config file. And all this config file needs to do is export the return of the defined config function, which has a key in there called plugins. So it’s just an array of all the plugins you want to use. In this case we only have the Vue plugin. Okay, another thing that the Vue CLI does for us though is it sets up path aliasing where your @ symbol represents the source folder, right? So we need to do this as well. So all you need to do is create this resolve alias configuration in your Vite config and point to the source folder. For me, it’s taking a while but it’s almost done. All right, so this is it for our Vite configuration folks. What we need to do now is that by default Vite assumes your index.html file is located at the roots of the project, so I’m gonna move each there as well. And we are no longer using Webpack, so I’m gonna get rid of all the different Webpack options and I’m just gonna replace them for a hardcoded values funnel. And once this is done, another thing that you’re gonna need to do is include a script tag of type module that points to the entry points of our app, of the JavaScript of your app, right? So in this case it’s going to be the main.gs file that is located in my source folder, because as you can see it’s creating the Vue app there.

And we are almost done. Another thing that you need to take into consideration is that the way you reach out for environment variables with Vite is no longer by using process.env, but instead you’re gonna be making use of import.meta.env. And right now TypeScript doesn’t know that my meta object has an env key in it, and for me to allow type script to know about this, I just need to go to my ts config and add to my type array, I can add vite/client. And just like that I have a full entire sense of the meta object, including the different helpers like globbing parts that were covered a few minutes ago. So yes, you can go back to reference the around in there. And that’s pretty much it. Like we don’t need to have this Webpack chunk name definition 'cause Vite has very defaults for the names of the chunks. You can configure how you wanna organize your chunks.

I’m not gonna go over this today, but the defaults are amazing already. And just like that folks, this is it. We should be able now to start our project. 160 milliseconds was all it took and it’s working fine. So we converted a Vue CLI project to Vite. A point that I wanna highlight as well is that if your project is running on Vue 2, everything that I’ve said still applies. The only difference that you need to account for is the plugin you’re gonna be installing. So if it’s a Vue 2 project, just add the number two to the name of the plugin. I wanna give a huge shout out by the way to Daniel Kelly. He presented this morning as well and his articles are as good as this, his talk in the morning. The guy is awesome. So I strongly recommend checking out his article on how to migrate from Vue CLI to Vite. It was an amazing read and it’s it the, yeah, Vue School is an amazing resource there. All right folks, so I’ve talked a lot and still shaking a little bit, but hopefully… Why do I like Vite? For a couple of reasons.

One, Vite is built around modern JavaScript and I am a developer that makes use of modern resources. And because of that, Vite comes heavily preconfigured for things I care about. So it drastically reduces the amount of work that I need to do before I can actually get my work done. You know what I mean? So it saves time there. And if I do wanna deviate from the preconfigured values, I can either flip a configuration in my Vite config or maybe add an additional plugin. We have a very strong community behind this producing a lot of very valuable plugins for us to use. Furthermore, hot module replacement, honestly, I cannot go back to not having that, having instantaneous feedback loops over your change in the code base is God given. So I really appreciate that Vite comes with hot module replacement right out of the box. And lastly, yes, like our community is amazing folks. Like there are so many interesting articles, and as you can see, like in this conference itself, the people just sharing their knowledge is, I don’t know, I haven’t seen anybody that is mean. You know, people are just so close. And the plugins are pretty awesome. So yeah, so I really hope that whatever I shared today is going to be able to help you in your projects, be them with Vue or any other type of framework. And yes, thank you so much for having me and I hope you can continue to learn and grow together. Thank you.