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.
Vite's Current Build Process
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.
Vite in Development Mode
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 <script> code), allowing for rapid browser updates with minimal processing.
In practice, Vite transforms TypeScript code into browser-compatible JavaScript. While the development build requires fewer steps than production (which we'll explore shortly), converting code quickly is still demanding—especially since changes need to appear in the browser within seconds.
That's why Vite employs esbuild, a high-performance tool written in Go. Since Go compiles directly to machine language (the low-level binary instructions that processors can execute), esbuild delivers exceptional speed - a crucial requirement for modern development server setups.
Vite in Production Mode
While build speed matters in production, it's not the top priority. When creating a production build, you can expect some waiting time regardless of your build tool. Unlike development mode—which only processes one file and its dependencies at a time—production builds must bundle all code from scratch, making instant builds impossible.
Additionally, production builds often require extra steps. For example, you may need to transpile JavaScript code for older browsers—something unnecessary during development when you can simply use a modern browser.
Other crucial production build steps include minification (removing unnecessary characters from code while preserving functionality) and code splitting (breaking code into smaller chunks that load on demand). These processes directly impact the code's runtime performance.
The top priority for a production build is ensuring the code runs efficiently in users' browsers. This takes precedence over build speed since production builds happen occasionally, while users access your site frequently.
Vite chose Rollup for production bundling because of its rich plugin ecosystem, which could be used directly with Vite. Since Vite's plugin architecture mirrors Rollup's, this compatibility helped foster a thriving plugin community and contributed to Vite's widespread adoption.
💡
So to summarize: Vite uses esbuild (optimized for speed) for development builds and Rollup (known for its plugins) for production builds.
While this setup has worked well, a major change is coming: Vite will soon replace both esbuild and Rollup with a new tool called Rolldown.
Before exploring Rolldown, let's examine the challenges with Vite's current setup that led to Rolldown’s invention.
The Problems with Vite
When a build tool or a bundler processes your source code, it first creates an abstract syntax tree (AST) - a tree-like data structure that represents your code's syntax and structure. For example, a function declaration would become a "FunctionDeclaration" node in the AST, with child nodes for its parameters and body.
Using two different tools to parse the same source code is inefficient for code transformation, since a single tool (or set of compatible tools) could reuse the parsed results throughout the process.
While esbuild handles Vite's development mode, it also plays a role in production mode through minification. This means esbuild and Rollup operate sequentially in the build process. For React applications, the process becomes even more complex with the addition of SWC (another build tool written in Rust) alongside esbuild and Rollup.
Using multiple tools in sequence creates inefficiencies, as each tool must parse the code independently and pass results between them. While Rollup's robust plugin ecosystem makes it valuable for production builds, its slower speed compared to esbuild presents a trade-off. The ideal solution would be a tool that combines esbuild's performance with Rollup's extensibility—and this is precisely what Rolldown aims to achieve.
Introduction to Rolldown
Rolldown is a bundler written in Rust—a programming language that, like Go, compiles directly to machine code. This means Rolldown will achieve speeds similar to esbuild.
Since Rolldown shares a similar plugin API with Rollup, most existing Vite-compatible plugins will work seamlessly with the new Rolldown-powered version of Vite.
In essence, you'll be able to use Vite the same way you do now, just with improved performance.
So how much faster are we talking? If speed is the main selling point, it needs to be significantly faster to justify adopting a new tool, right?
According to benchmarks by Evan You, when testing the bundling speed of Vue's core source code, Rolldown's build setup performs over 7x faster than the Rollup-based setup.
This benchmark specifically measures production build time. What about development?
Currently, Vite uses esbuild for development. According to Evan You's benchmarks, Rolldown performs almost twice as fast as esbuild. This improvement is more modest than the Rollup comparison since esbuild is already highly performant.
All of these performance upgrades are powered by a suite of underlying tools in Rolldown. These include a new parser, linter, resolver, transformer and more—all part of the Oxc project (created by the Rolldown team).
Oxc is a set of JavaScript language tools. Although these tools are used in Rolldown, they can also be used individually in a non-Rolldown context. For instance, the Oxc linter is faster than ESLint, so it can be used in your CI workflow to catch code errors quickly before running ESLint.
Oxc tools are generally faster than other similar tools because they were written from scratch with performance as their primary goal.
The Future of Vite
While Rolldown is not yet production-ready, an alpha release of Vite featuring Rolldown integration is expected before the end of 2024. We'll continue reporting on the latest developments in Vue, Vite, and Rolldown in the coming months.
If you'd like to learn more about Vite, check out the course Lightning Fast Builds here on Vue Mastery, taught by Vite's creator Evan You himself.
Originally published at https://www.vuemastery.com on December 4, 2024.
Top comments (0)