The Problems #
Over time we have seen tools like webpack, Rollup and Parcel, which greatly improved the development experience for frontend developers.
The slow feedback loop can greatly affect developers' productivity and happiness.
Why Bundle for Production #
When cold-starting the dev server, a bundler-based build setup has to eagerly crawl and build your entire application before it can be served. Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.
How is Vite Different from X? #
Some large dependencies (e.g.
component libraries with hundreds of modules) are also quite expensive to process. Dependencies may also be shipped in various module formats (e.g.
ESM or CommonJS).
Vite pre-bundles dependencies using esbuild.
JSX, CSS or Vue/Svelte components), and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g.
with route-based code-splitting). Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen. When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle for obvious reasons: the update speed will degrade linearly with the size of the app.
Why Not Bundle with esbuild? #
In some bundlers, the dev server runs the bundling in memory so that it only needs to invalidate part of its module graph when a file changes, but it still needs to re-construct the entire bundle and reload the web page. Reconstructing the bundle can be expensive, and reloading the page blows away the current state of the application.
This is why some bundlers support Hot Module Replacement (HMR): allowing a module to "hot replace" itself without affecting the rest of the page.
Slow Updates #
This greatly improves DX - however, in practice we've found that even HMR update speed deteriorates significantly as the size of the application grows. In Vite, HMR is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary (most of the time only the module itself), making HMR updates consistently fast regardless of the size of your application.
Vite also leverages HTTP headers to speed up full page reloads (again, let the browser do more work for us): source code module requests are made conditional via 304 Not Modified, and dependency module requests are strongly cached via Cache-Control: max-age=31536000,immutable so they don't hit the server again once cached. Once you experience how fast Vite is, we highly doubt you'd be willing to put up with bundled development again.
Even though native ESM is now widely supported, shipping unbundled ESM in production is still inefficient (even with HTTP/2) due to the additional network round trips caused by nested imports. To get the optimal loading performance in production, it is still better to bundle your code with tree-shaking, lazy-loading and common chunk splitting (for better caching). Ensuring optimal output and behavioral consistency between the dev server and the production build isn't easy.
This is why Vite ships with a pre-configured build command that bakes in many performance optimizations out of the box.
Slow Server Start #
While esbuild is blazing fast and is already a very capable bundler for libraries, some of the important features needed for bundling applications are still work in progress - in particular code-splitting and CSS handling.
Command Line Interface #
For the time being, Rollup is more mature and flexible in these regards. That said, we won't rule out the possibility of using esbuild for production build when it stabilizes these features in the future.
You can check out the Comparisons section for more details on how Vite differs from other similar tools. TypeScript 41,055 MIT 3,227529(1 issue needs help)214 Updated Apr 28, 2022.
Using Unreleased Commits #
This issue should just be closed, as the issue can be fixed by upgrading the right dependencies.