What is Vitejs? An Overview of the New Front-end Build Tool

Vite

Vite is a front-end development platform that significantly enhances the experience. In just three commands, you can set up a development environment for frameworks like Vue and React and a vanilla JavaScript app with a dev server and hot reloading.

Vite can also be used for TypeScript without any additional setup and for Sass with one extra instruction. (A webpack project would need a lot of configuration.) You'd have to fiddle with loaders and mount the webpack dev server separately.)

You'll have a build tool and a dev server once Vite is installed, and you'll be able to work with the latest tools and languages. You'll learn how easy it is to get started with Vite in this introduction. You'll also discover how easy Vite is, how to get started using it with a library like Vue, and how little it gets in the way when you're working with it.

Fun fact: the name "Vite" is derived from the French word "vit," which means "quick."

How Does Vite Work?

Vite follows a recent trend of tools like Svelte (where the framework is essentially compiled away) and others like Snowpack, which use modern JavaScript features (such as ES modules) to provide a smooth, quick dev experience with little to no configuration and minimal installed package overhead. You simply install Vite and a couple of plugins, make a few minor configuration changes, and begin working on your app.

Vite is a modern dev environment that eliminates the need for bundling by serving browser native ES modules. It includes starter files (templates) for a variety of frameworks and vanilla JavaScript and TypeScript, JSX, and Sass support (although you need to install one dependency for Sass).

Vite is extremely quick since it uses native ES modules and does not need the whole bundle to be rebuilt when anything changes. Because of this, HMR updates are always fast, regardless of the size of your application. Vite comes with a pre-configured build command that bakes in several performance enhancements right out of the box when bundling for output.

Vite is not only fast, but it also supports hot module replacement (which means you can see the code refresh in the browser as you work), and you can use it to compile a minified version of your project for deployment. Using it, you can easily get started with a Vue or React project without investing in the Vue CLI or Create React App, all of which come with everything you need. This makes it perfect for rapid prototyping and small projects, but nothing prevents you from using it in a larger project as well.

So, let's give Vite a try and see how it goes. It'll be fascinating to see how much of our current workflow Vite will handle better. (Spoiler alert: Vite made some stuff better, but not everything.)

The First Installment

Let's get started by downloading and installing Vite.

You'll need a copy of Node installed on your computer to go along with this tutorial.

We get to choose a project name and a prototype after running npm init @vitejs/app. The choices are as follows at the time of writing:

•  vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

Let's stick with vanilla for now. This creates a directory with some files in it (based on the project name). There are files for npm and Git, as well as index.html, main.js, style.css, and favicon.svg. Only Vite is listed as a dependency in package.json and some scripts to start the development environment and a construct. We'll need to change into the project folder and install the dependencies, as instructed onscreen:

cd vite-project

npm install

The dev server can then be started with npm run dev, and our app can be viewed at http://localhost:3000/. When you make changes to any of our project files, the changes are instantly visible on the computer.

When you run npm run build, the project is compiled into a dist folder containing the JavaScript and CSS files. Both files seem to be compressed.

TypeScript files are provided out of the box, according to the documentation. So, despite the lack of a dedicated TypeScript template in the vanilla option, we should be able to rename main.js to main.ts, and Vite should compile it for us, right? It certainly does! It appears to be compiling properly after renaming the file and adding some TypeScript-specific syntax.

Let's do the same thing with CSS by renaming it style.scss and adding some Sass syntax. Both the console and the web page show the following error:

I adore a (fairly) descriptive mistake! We can now use Sass to our hearts' content after running npm install sass —save-dev and restarting the watcher. It's really cool.

Normally, I'd plan out my stack ahead of time, install the dependencies I'll need, and spend a ridiculous amount of time configuring and debugging why certain resources won't work together. Of course, we should also plan ahead for our stack, but being able to move from JavaScript to TypeScript and CSS to Sass with very little effort is very useful.

I'm excited at this point because we can set up a fairly advanced stack in under a minute. Vite already proves to be a fantastic tool for static sites and potentially Jamstack applications, as it uses an index.html as the entry point and builds to plain HTML, CSS, and JavaScript.

Single-page Application

Let us see if we can build a single-page application. Let's give Vue a shot!

We get Vite, Vue, and a Vite plugin to compile Vue after running npm init @vitejs/app and selecting the Vue prototype. We'll need to manage routes if we're building an SPA, so let's install Vue Router.

Vite doesn't seem to be of any use in this situation. We get a basic Vue setup and have complete control over what we plug into it. It works after you install Vue-router and configure Vue to use it. Vite could also be used to build multiple pages, as defined on the multi-page app page in the docs, but this would necessitate adjusting Vite's Rollup configuration.

I did come across vite-plugin-Vue-router, a new community-made plugin that generates a router based on file paths, similar to Nuxt.

Someone will inevitably construct a Vue + Vue Router + Vuex template for Vite, but I doubt it will ever be better than Nuxt. The same could probably be said for React and Next.js, as well as Svelte and Sapper/SvelteKit. There are web application systems that are tailored to specific libraries and complex web applications.

If there isn't a battle-tested web app framework for the language of your choosing, I believe Vite is a viable alternative, though it will require some configuration.

Other Back Ends' Integration

I sometimes (have to) operate on non-Jamstack codebases that use.NET or PHP as a back end. Vite could theoretically also be used to create optimized JavaScript and CSS bundles. Vite has a page dedicated to back-end integration that can be used for this purpose.

Vite creates a manifest file that contains details about all completed bundles after you follow the instructions. This file can be read to generate the CSS and JavaScript bundles' link> and script> tags, respectively. All imports are bundled together in main.js, but dynamic imports (import('path/to/file.js') are split up into their own packages.

Performance

The main focus of the Why Vite page is on success and developer experience. After a few tests, I must admit that I'm impressed. I'm blown away. Any code change is reflected in the browser quickly, often instantly, thanks to the Vite dev server's Hot Module Replacement.

I've added 20,000 lines of CSS and modified the file types to TypeScript and Sass to compel Vite to use the TypeScript and Sass compilers, respectively. Of course, after my attempts to slow things down, there is some lag, but it still exceeds my standards.

Developer Experience

I've set up hundreds of projects by creating software over the course of my career. Big and complex projects took a day or two to set up and make sure all tools and plugins worked together, regardless of whether I used Grunt, Gulp, Rollup, or webpack. Later on, I'd devote more time to the tools in order to patch bugs, optimize bundles, and reduce build times.

Vite is a breeze in comparison. I quickly set up four stacks for this introduction and slightly customized them. Vite eliminates the need to juggle two dozen resources and plugins. You may even be able to bypass setup and get right to work, thanks to some excellent defaults. This is incredible. I have the same feelings about Nuxt and, I assume, Next. In a similar way, js functions.

Vite's internals can be configured, allowing us to bypass the configuration of Rollup and various Rollup plugins. If we have unique requirements, this is ideal. Personally, I would avoid over-customizing it so that we can trust that the setup works as intended, which leads me to my next point: trust.

The more resources I attach, the more vulnerable it feels. If one part fails or makes breaking changes, the entire pipeline breaks, and we must re-examine all of the tools and plugins and their intricacies to repair it. Vite basically relieves us of the responsibility, and Vite has a group at its disposal to investigate problems. This means we can rely on our tools to complete their tasks.

Conclusion

Overall, Vite is a fun game! It's a great addition to the recent trend of tools like Parcel and Snowpack that make tooling easier. I was pleasantly surprised at how easy it is to set up. It feels almost like cheating because it requires so little effort, and I love it.

If you want a front-end framework, I'd recommend Nuxt, Next.js, SvelteKit/Sapper, or something similar. These tools not only make tooling easier and creation faster, but they also provide a lot of plugins that complex applications would almost certainly need.

Vite is probably my go-to tool when I don't want to use a system but still need minified scripts and styles.