Vite 8.1 Bundled Dev Mode:
15x Faster Startup for Large Apps

Introduction

Vite 8 was released in March 2026 with a major architectural shift — a single unified bundler powered by Rolldown, the Rust-based successor to Rollup. Since then, Vite has grown to 41.6 million weekly downloads and is on track to surpass Vite 7's peak adoption.

Now, Vite 8.1 (released June 23, 2026) delivers the feature that developers with large applications have been waiting for: experimental bundled dev mode. This isn't just an incremental improvement — it fundamentally changes how Vite's dev server operates, bringing bundling to development the same way it works in production.

Alongside the headline feature, Vite 8.1 adds native WASM ESM Integration, an experimental Chunk Import Map for better caching, and moves closer to using Lightning CSS as the default CSS processor. Let's dig into each one.

Experimental Bundled Dev Mode

The core insight behind bundled dev mode is straightforward: Vite's classic dev server serves each module as a separate ESM request. For small-to-medium projects this is extremely fast — instant HMR, near-zero startup. But for large applications with thousands of modules, the overhead of resolving and serving each individual module adds up significantly.

Bundled dev mode (previously called "Full Bundle Mode" during development) runs Rolldown during development, bundling modules into fewer requests. The result is dramatic performance gains that scale with application size.

Benchmarks: 10,000 React Components

In Vite's initial testing with a benchmark app loading 10,000 React components:

Real-World: Linear

The Linear team — one of Vite's most prominent users with a large, complex application — tested bundled dev mode in production-like conditions and reported:

• Cold start rendering: up to 3x faster
• Full reloads: around 40% faster
• Network requests: 10x fewer during dev sessions

These numbers from a real production app confirm that the synthetic benchmarks translate to measurable improvements in daily developer workflows.

How to Enable Bundled Dev Mode

The feature is opt-in and experimental. Enable it via the CLI flag:

npx vite --experimental-bundle

Or in your vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({
  experimental: {
    bundledDev: true,
  },
})

Current Limitations

Bundled dev mode currently focuses on the browser side and works with the built-in plugins and main features. If you rely on third-party plugins or niche features, they may not function correctly in this mode. The Vite team is actively:

• Expanding plugin compatibility
• Preparing documentation for plugin authors about required changes
• Working toward feature parity with the unbundled dev server

For most large projects using standard Vite features, it's worth enabling today. For projects with custom plugins or exotic configurations, test thoroughly before adopting in daily development.

WASM ESM Integration Support

One of the most developer-friendly additions in Vite 8.1 is native WASM ESM integration. You can now import WebAssembly modules as ES modules and use their exported functions directly:

import { add } from './add.wasm'

console.log(add(1, 2)) // 3

Previously, WASM imports required a plugin — vite-plugin-wasm created and maintained by Menci during the early stages of the Wasm ESM Integration proposal. The implementation has now been upstreamed into Vite core, eliminating the plugin dependency entirely.

This aligns Vite with the broader web platform. The Wasm ESM Integration proposal allows browsers to handle WASM modules natively through the module system — just like JavaScript modules — removing the need for manual instantiation via WebAssembly.instantiate().

For developers working with computationally intensive tasks — image processing, cryptography, compression, game engines — this means simpler, cleaner imports and better tooling integration out of the box.

Experimental Chunk Import Map

Here's a subtle but important performance improvement. In the output bundle, each chunk's import statement includes the hash of the chunk it references. This ensures browsers load the correct version after content changes.

The problem: when chunk utils.js changes, page.js (which imports utils) gets re-hashed. Then entry.js (which imports page) gets re-hashed too. This cascading hash chain invalidates the entire dependency tree on every change, defeating long-term caching.

The experimental Chunk Import Map solves this by using import maps — a browser-standard mechanism for remapping module specifiers. Instead of baking the hash into the import statement, it uses an import map that maps logical chunk names to their hashed URLs. When only utils.js changes, the import map updates, but page.js and entry.js keep their hashes intact.

This feature is built on top of Rolldown's existing chunk import map support, with additional work by Taisei Mima to handle Vite-specific features. Note that experimental.renderBuiltUrl currently does not work with this option.

Stepping Closer to Lightning CSS by Default

Vite has offered Lightning CSS as an opt-in CSS processor since Vite 5.3. The plan is to make it the default in the next major release, but two features were missing compared to PostCSS:

• External CSS imports in CSS files — the ability to import an external CSS file from another CSS file via @import
• File dependency registration by plugins — allowing CSS plugins to register file dependencies so Vite can trigger rebuilds when those files change

The Vite team worked with the Lightning CSS team to add both features. They're available in Vite 8.1. You can try Lightning CSS today:

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
  },
})

Lightning CSS brings significantly faster CSS processing (written in Rust), built-in vendor prefixing, CSS nesting, and modern color functions — all without PostCSS plugins. If you're starting a new project in 2026, there's little reason not to enable it now.

Other Notable Changes

Case-Insensitive import.meta.glob

import.meta.glob now supports a caseSensitive option. When set to false, it matches files case-insensitively:

const modules = import.meta.glob('./dir/module*.js', {
  caseSensitive: false,
})

This is especially useful on case-insensitive filesystems or when working with mixed-naming-convention codebases during migration.

Asset Discovery for Custom HTML Elements

Vite now discovers assets in custom HTML elements and attributes. Previously, only pre-defined elements (like <img src>) were scanned. Now you can configure additional sources:

import { defineConfig } from 'vite'

export default defineConfig({
  html: {
    additionalAssetSources: {
      'html-import': {
        srcAttributes: 'src',
      },
      img: {
        srcAttributes: ['data-src-dark', 'data-src-light'],
      },
    },
  },
})

This allows custom elements like web components, framework-specific imports, and theme-aware asset loading to participate in Vite's asset pipeline.

Migration from Vite 8.0

Upgrading to Vite 8.1 is straightforward for most projects:

npm install [email protected]

The release focuses on additive features — no breaking changes from Vite 8.0. All existing configurations, plugins, and project structures remain compatible.

Recommended migration steps:

1. Update your Vite version and verify your build still works
2. For large apps, enable experimental.bundledDev and test dev workflow
3. If you use WASM modules, remove vite-plugin-wasm — it's now built-in
4. For new projects, enable css.transformer: 'lightningcss'
5. Enable Chunk Import Maps if long-term caching is critical for your deployment

Bundled vs Unbundled: When to Use Each

In Vite 8.1, you have a genuine choice. Here's a practical guide:

Use unbundled dev mode (default) when:

• Your app has fewer than ~500 modules
• You rely heavily on third-party plugins
• You use niche Vite features or custom plugin chains
• Cold start and full-reload speed are not bottlenecks

Enable bundled dev mode when:

• Your app has thousands of modules (large monorepos, enterprise apps)
• Cold start times of 10+ seconds are hurting productivity
• Full reloads take several seconds
• You use standard Vite features with minimal custom plugins

The beauty of Vite 8.1 is that you can toggle between modes with a single config change. There's no wrong choice — just the right one for your project's current phase.

Vite 8.1 vs Other Build Tools

How does Vite 8.1's bundled dev mode compare to alternatives?

• Webpack: Webpack has always bundled during dev, but its cold start times are notoriously slow for large apps. Vite 8.1 bundled mode matches Webpack's production-like dev environment but with much faster Rust-based processing.
• Turbopack: Next.js's Rust-based bundler is fast but tied to Next.js. Vite 8.1's bundled mode is framework-agnostic — works with React, Vue, Svelte, Solid, Lit, and vanilla JS projects.
• Rspack: A Webpack-compatible Rust bundler with excellent performance. Vite 8.1 competes well on speed while maintaining Vite's simpler configuration model and richer plugin ecosystem.

For context on how Vite fits into the broader web build tool landscape, see my analysis of VoidZero joining Cloudflare and what it means for Vite's future development.

Conclusion

Vite 8.1 is a significant release that addresses the one remaining pain point for large-scale Vite users: dev server performance. Bundled dev mode transforms a dev server that was already fast for small projects into one that scales to the largest applications without degradation.

The addition of native WASM ESM integration, Chunk Import Maps, and the ongoing work toward Lightning CSS by default show that Vite's ecosystem is maturing rapidly. For developers building production applications in 2026, Vite 8.1 is a compelling upgrade.

As a web developer who builds applications with modern tooling, I've been testing Vite 8.1 since the beta — the performance improvements are real and immediately noticeable in large projects. If you're planning a new project or considering a toolchain upgrade, I can help you make the right choice for your specific needs.

FAQ