Welcome everyone. Evan You here, and today in this video we're going to be talking about Vite.
Vite is a new build tool that I've been working on since last year, and we consider it to be the next generation of front-end tooling. So, in this video we're going to be talking about what is Vite, why Vite, and we'll show you how to get started with it, and walk through some of the cool features that Vite provides out of the box.
So, let's get started.
What is Vite and the Problem It Solves
First, what is Vite?
If you go to the website, Vite is the French word for fast, okay. So, some may pronounce it as Vite but it's actually the French word for fast so we pronounce it as Vite.
So Vite is a build tool. It comes with a dev server, and also bundles your code for production. So, if you've used Vue CLI before, you can think of it as a loose equivalent to Vue CLI, just leaner and faster.
The problem that Vite is trying to solve really is just this feedback loop speed. The feedback speed during development. If you've used of Vue CLI especially in a large project, you probably are used to waiting for half a minute or even up to a minute for your dev server to spring up. And when the project gets larger, hot module replacement gets slower as well. Just editing a single file you may have to wait a few seconds for things to update on the screen.
Now, a lot of these problems are fundamentally caused by the need for bundling.
Leveraging Native ES Modules for Speed
And why do we have bundlers? Because in the old days before we had native ES modules, there's no way for the browser to actually support these modularized code. So, in the early days we invented module systems like AMD or CommonJS, and we wrote our source files in those formats in lag tools like webpack, Parcel, or a Browserfy to bundle these codes so that finally they becomes a single file that can be run in the browser.
Now luckily, today most modern browsers natively supports ES modules. This means during development there is a large chunk of work that we no longer need to do because the browser can now handle them natively.
So, the premise of Vite during development, is we're going to author our code as native ES modules. And we'll take these ES modules and then parse the file and look for your import statements and then send HTTP requests for each module to the dev server. And the dev server just serve these modules as is with very lightweight processing. So, a lot of work is done by the browser natively, which is why there's little preparation that we need when we start up the server.
Pre-Bundling Dependencies with esbuild
Another aspect of it, is if you have large dependencies Vite will smartly pre-bundle them using esbuild to reduce the number of requests that the browser needs to make to a dev server.
Now, this bundling process is done with esbuild. Esbuild is a tool, excellent tool written by Evan Wallace the CTO of Figma, and esbuild is written in Go which is a compile to native language. So it is of orders of magnitude faster than equivalent bundlers that's written in JavaScript.
So, with these factors combined Vite provides you with a extremely fast and lean development experience, alright. So, enough for why Vite. I think the fastness, the how fast Vite is can only be experienced when you actually try it yourself.
Getting Started: Creating Your First Vite Project
So, let's do that now.
I'm going to switch to my terminal here, and to get started with Vite, first make sure you have Node.js and npm installed on your system. So, once you have that, simply run the command npm init @vitejs/app.
So, this one will ask you for a project name, so I'm just going to say hello-vite. And it will ask you to select a framework. Surprise, Vite is actually framework agnostic, so it's not just for view. So even if you are using react or preact, you can actually use Vite to run those frameworks as well. In fact, for this first demo we're not going to use any framework at all. So we're just going to go with a vanilla template, we also provide you with a TypeScript Support out of the box. But for now we are going to just pick the vanilla.
So, I'm going to cd hello-vite. And before we do anything, it does ask you to install npm dependencies. But before we do anything I'm going to open up my editor, and just take a look at the photo structure.
Exploring the Minimal Project Structure
As you can see this is extremely minimal, we have an index.html.
The index.html has a script type equals module, with a source pointing to main.js which is right here next to it. Now, we can't actually run this with any simple HTTP server without any special features. This is valid syntax for native ESM usage, right. And inside here we see something special. We are importing some CSS. So we're going to be talking about CSS just in a minute.
And now let's look at package.json. As you can see Vite is the only dependency that we need here. And we have a few npm scripts, we have a dev script, we have a build script, and we have a serve script. So, very straight forward.
So, let's run npm install now. I'm going to be running npm install. And as you can see the installation is extremely fast. There are total 13 packages installed, that's how lean Vite is.
So, I don't think I have Vite cash locally here, so this install is actually legit from the registry. So that took less than a second, right. And now I can run npm run dev, and start the server. And that also didn't take long.
So now we have a local server running. So I'm going to be opening this, and as we can see hello Vite, okay.
Out-of-the-Box TypeScript Support
So, that is the vanilla dev server. And if we go back to our code, notice that this is really not different from a simple HTTP server. There's nothing special going on here, but the cool part is if we rename this to TypeScript and change this to TypeScript, and I'm going to... Well, it actually already reloaded but I'm going to restart the server just to make sure this works, right. So, it still works, right.
Inside a Vite project you can in fact... I'm going to move this around. Inside a Vite project you can in fact link directly to TypeScript files and Vite will transpile it automatically. Now, this means TypeScript works out of the box. Now, one thing important to know here is that TypeScript in Vite is transpile only, which means Vite does not do any type checking for you.
So, one of the reasons we do this is first, we are using esbuild to transpile the TypeScript files. Again, esbuild was written in Go, so it is in fact up to 30 times faster than transpiling your TS files with TypeScript itself which is written in JavaScript, right. So, when we are using esbuild to transpile, because it doesn't do type checking, so if you're importing a type, make sure to do import type from another file. So, this is one thing people kinda get tripped up on, but when you're using this we believe this is a really, really small price to pay in order to get this greatly improved performance when you have a large TypeScript project.
Another reason why we opt to do transpile only and to not do type checking inside Vite, is because if you have a properly set up IDE like VS Code with TS in your project, likely you already get the TypeScript, type checking enhanced directly in your IDE. So, TypeScript is already running as part of your IDE, right. So, essentially Vite says, "Okay, we'll leave that to your IDE and your build process," but during development Vite is not going to concern itself with type checking, right, because we already have other tools handling that part.
CSS Imports and Hot Module Replacement (HMR)
Great. So, that is TypeScript. Another important aspect of this. So, as we can see we can actually import CSS right here. So, let's look at the CSS here. I'm going to be changing the color here, let's say red. As you can see it updated instantly. And notice the address bar here. Green. Notice there's actually no reload.
I'm going to open the Elements pane here, and inspect this, right. So now let's edit again. As you can see the page did not reload. This is hot updating. This imported CSS is being loaded in the hub here. As you can see it's here, so if we edit it. This is hot updated right here without reloading the page.
Now this is the starting to getting to the magical territory of Vite because a native, a simple basic HTTP server does not do this for you. There's no hot reloading, there's no automatic page reloading. For example, if I update my TypeScript here, so here's the hello Vite. I'm going to just add two of these, right. So this reloads the page because there's no specific logic that's set up in this project to handle TypeScript file updates. But CSS hot reloading works out of the box.
Now, we're going to be talk about a bit more CSS later, but now I also want to show off one thing, right.
Managing npm Dependencies
So, we are used to importing, installing dependencies and using independencies from npm. For example, I wanna use lodash. So, I'm going to say import debounce from lodash-es, right.
So, in an actual browser without any pre-processing this code will not work if this is a native ES module that's served to the browser. One of the reason being that the browser doesn't really know what is npm. It doesn't know where to resolve dependencies, right. So, to the browser this is what we call an invalid specifier, okay. But Vite knows how to handle it.
So, let's install, I'm going to open up a new tab here, and I'm going to say npm install lodash-es. So we installed that, and I'm going to restart the server npm run dev.
Oops. So now we have lodash-es. You see the IDE actually figured out we installed lodash-es so it now has type definitions. And if we go into the browser, I'm going to log just to see if we have the debounce element, so look at the Console. Yes we do get the bounce function from lodash, which is great.
So yeah, so Vite also handles npm dependencies for you. Now, one of the cool thing here is if we look at the debounce, we look at the network, oops make it smaller. As you can see Vite actually combined lodash-es which is a collection of many small modules into a single file. So it loads faster than it normally would if you load lodash-es over native ES modules. So, another important detail for performance during development, okay.
So, that's npm dependencies.
