Have you heard of Vite — the modern and super-fast tool for scaffolding projects? It’s spreading like wild fire due to its almost immediate code compilation and fast hot module replacement.
Vite is one of many tools that have come along to help developers get projects kicked off. Maybe you’ve used Babel, webpack and Create React App in the past. Vite is the next new thing to make our lives easier.
These feature-rich CLI tools provide a boilerplate setup, code transpilation, helpful optimizations and/or a dev server with hot module replacement out of the box. No longer do we have to create a bunch of HTML, CSS, and JS files, or deploy our projects manually via FTP clients, and files were uploaded as they were, without any processing and optimizations like minification and compressing.
So What Makes Vite Different?
Vite may just be our fastest bundler/compiler/dev server yet. On top of that, it provides a great developer experience.
Created by Evan You, the creator of the Vue.js framework, Vite runs a server to compile and serve on the fly any required dependencies via ES modules. This approach allows Vite to process and provide only the code that’s needed — meaning Vite handles less code during the server startup and doesn't have to pre-compile unnecessary code.
Where webpack bundles all files in the project before the development server is ready, thereby growing slower the bulkier a project grows, Vite stays nimble, working with ES modules to serve code as needed.
Vite also uses esbuild for pre-bundling dependencies during development. esbuild is an extremely fast JavaScript bundler written in the Go language. This makes it much faster than other bundlers like webpack, Rollup and Parcel, which were written using JavaScript.
On top of its speed, Vite is framework-agnostic. While a lot of popular frameworks provide official CLIs that can be used to scaffold projects (e.g., React offers Create React App, and Vue has Vue CLI), you can use Vite across the board, so it’s as versatile as you are.
Learn More About Vite and How To Use It
Would you like to know how to set up path resolving, use environmental variables, scaffold a project and see pros and cons of Vite? I’ve written an in-depth guide to Vite that talks through more details about how it’s different as well as how to use it to get your project up and running.
Top comments (3)
Couple notes:
1) Vite uses rollup for prebundling, so it would be weird if it was faster ( source: vitejs.dev/ )
2) Webpack can use esbuild too ( source: github.com/privatenumber/esbuild-l... ) - and the speed difference, at least in small to medium projects is not noticeable, from my experience. See my starter to see how to configure it ( github.com/pavelloz/webpack-tailwi... )
That's just what I came to say 😂
On the other hand I like Parcel for many small to medium projects as it requires no configuration so it's a faster hands down
True, true. Thats why i create "starters" for myself, so the starting point is the same, no matter if the tool is battery-included or bare bones.