Written by Andy Li
A build tool is essential for modern web development, acting as the engine that transforms your raw code into something browsers can understand and execute efficiently. Without a fast, reliable build tool, you could face frustratingly long startup times when launching your development server, and even simple code changes could take precious seconds to reflect in the browser—disrupting your development flow and productivity.
In this article, we'll talk about all the things that are involved in the build process of a Vue.js app (or a React.js app), including Vite, esbuild, Rollup, and an up-and-coming tool that is being built by Evan You (creatore of Vue.js and Vite.js) called Rolldown.
First, let's start with Vite.
Like many other frameworks, Vue.js is using Vite as its build tool.
Vite has two different modes: development and production. They're implemented differently behind the scene.
Vite uses different build strategies for development versus production environments to optimize for their unique needs. During development, the focus is on providing rapid feedback and fast hot module replacement (HMR) for a smooth developer experience. In production, the priority shifts to generating optimized, performant bundles for end users.
Let's explore how Vite handles development builds, where its innovative approach really shines.
In development mode, build speed is crucial. Rather than bundling code after every change, Vite serves the modified files directly in ESM format (like Vue component's
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
