前端技术文档

Appearance

Vite ​

简介 ​

Vite（法语中的"快速"之意）是一个现代前端构建工具，提供了极速的开发服务器和优化的生产构建能力。它利用浏览器原生 ES 模块导入特性，实现了开发环境下的无打包（No-Bundle）开发服务器，显著提升了开发体验。

核心特性 ​

极速的服务启动 ​

Vite 通过原生 ESM 按需编译，避免了传统打包工具的整体打包过程，实现了毫秒级的冷启动速度。

bash
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

即时的模块热更新（HMR） ​

Vite 提供了开箱即用的 HMR 能力，修改代码后浏览器能立即反映变化，且能保持应用状态。

优化的构建 ​

生产环境下，Vite 使用 Rollup 进行构建，提供了多项优化：

javascript
// vite.config.js
export default {
  build: {
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    // 设置最终构建的浏览器兼容目标
    target: 'modules',
    // 指定输出路径
    outDir: 'dist',
    // 生成静态资源的存放路径
    assetsDir: 'assets'
  }
}

插件系统 ​

Vite 拥有兼容 Rollup 的插件接口，同时提供了特有的钩子函数，便于扩展功能。

javascript
// vite.config.js
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    vue(),
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

框架支持 ​

Vite 提供了多种流行框架的官方模板：

  • Vue
  • React
  • Preact
  • Lit
  • Svelte
  • Vanilla JS

性能对比 ​

特性ViteWebpackRollup
开发服务器启动极快较慢中等
热更新速度极快中等较快
生产构建快速中等快速
配置复杂度简单复杂中等
生态系统快速成长丰富中等

常见问题与解决方案 ​

浏览器兼容性 ​

  • 使用 @vitejs/plugin-legacy 插件支持旧浏览器
  • 配置 build.target 指定目标浏览器

路径别名配置 ​

javascript
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

学习资源 ​