The version evolution history of Vite

The Birth of Vite 1.0

In 2019, while exploring modern frontend toolchains, Evan You identified bottlenecks in the development experience of traditional bundlers. The widespread adoption of native ES modules in browsers led him to realize: bundling could be skipped entirely during development. In April 2020, Vite 1.0 was officially released, with its core innovations including:

1. On-demand compilation based on native ESM
2. Dependency pre-bundling (using esbuild)
3. Lightning-fast HMR

A typical vite.config.js configuration for version 1.x:

// vite.config.js (v1.x)  
export default {  
  optimizeDeps: {  
    include: ['lodash-es']  
  },  
  plugins: [vue()]  
}  

At this stage, Vite already supported:

• Cold starts in milliseconds (compared to webpack's 30s+)
• State-preserving hot module replacement (HMR)
• Deep integration with Vue/React

Vite 2.0 Architectural Upgrade

Released in February 2021, version 2.0 underwent a major overhaul:

Core Changes:

• Generalized design: No longer Vue-specific
• New plugin system (compatible with Rollup)
• Server-side rendering (SSR) support
• Experimental worker support

// vite.config.js (v2.x)  
import { defineConfig } from 'vite'  
import react from '@vitejs/plugin-react'  

export default defineConfig({  
  plugins: [react()],  
  worker: {  
    format: 'es'  
  }  
})  

Performance Breakthroughs:

• 10x faster dependency pre-bundling (esbuild replacing Rollup)
• CSS code splitting support
• Automatic polyfilling for dynamic imports

Vite 3.0 Production-Ready Enhancements

Released in July 2022, version 3.0 focused on production optimizations:

Major Improvements:

1. Default support for modern browsers (explicit downgrade required)
2. 30% faster build performance
3. Brand-new preview server

// Modern browser build configuration  
export default defineConfig({  
  build: {  
    target: 'es2020',  
    cssTarget: 'chrome80'  
  }  
})  

New Features:

• Global import replacements (e.g., __VERSION__)
• Experimental Lightning CSS support
• More precise dependency scanning

Vite 4.0 Ecosystem Expansion

Released in December 2022, version 4.0 introduced:

Core Upgrades:

• Default Rollup 3 (further build speed improvements)
• Full TypeScript 5.0 support
• Smarter CSS processing

// Example using TS decorators  
@Injectable()  
class AppService {  
  @Log()  
  fetchData() {  
    return import('./data.json')  
  }  
}  

Toolchain Integration:

• Vitest 1.0 officially integrated
• Official PWA plugin
• Enhanced monorepo support

Vite 5.0 Future Directions

Version 5.0, released in October 2023, introduced forward-looking features:

Breaking Changes:

1. Default ESM output (note CommonJS compatibility)
2. Experimental Rust core modules
3. Fine-grained HMR control

// Fine-grained HMR API usage  
if (import.meta.hot) {  
  import.meta.hot.acceptExports(['count'], (newExports) => {  
    console.log('count changed:', newExports.count)  
  })  
}  

Build Optimizations:

• Parallelized dependency analysis
• Smarter caching strategies
• Native WASM support

Explosive Growth of the Community Ecosystem

As the core stabilized, the Vite ecosystem experienced exponential growth:

Mainstream Framework Adaptations:

• @vitejs/plugin-vue (supports Vue 3.3)
• @vitejs/plugin-react (supports React Server Components)
• vite-plugin-svelte (supports Svelte 4)

Emerging Innovative Tools:

// Example: File-based routing with vite-plugin-pages  
import Pages from 'vite-plugin-pages'  

export default defineConfig({  
  plugins: [  
    Pages({  
      dirs: 'src/views',  
      exclude: ['**/components/*']  
    })  
  ]  
})  

Enterprise-Grade Solutions:

• VitePress 1.0 (documentation tool)
• Astro 3.0 (multi-framework integration)
• Nuxt 3 (deep Vite integration)