Vite 介绍

什么是 Vite

Vite 是下一代前端开发与构建工具，由 Vue.js 作者尤雨溪创建。Vite 利用浏览器原生 ES Module 能力，在开发环境下无需打包即可启动，在生产环境使用 Rollup 进行打包。

Vite 的核心特点

极速的开发服务器启动

利用原生 ES Module，无需打包即可启动
冷启动速度极快，毫秒级响应
无论项目大小，启动时间基本一致

即时的热模块替换（HMR）

HMR 速度不随项目规模增长而下降
精确的模块热更新
支持框架组件的 HMR

按需编译

只编译当前页面需要的代码
源码无需打包即可运行
大幅减少编译等待时间

优化的生产构建

使用 Rollup 进行生产构建
预配置的优化策略
支持多种构建模式

Vite 的工作原理

开发环境

利用原生 ES Module

Vite 利用浏览器原生支持 ES Module 的特性：

html

<script type="module" src="/src/main.js"></script>

浏览器会自动发起请求获取模块，Vite 拦截这些请求并进行即时编译。

依赖预构建

Vite 会将依赖预先构建：

CommonJS/UMD 转换：将 CommonJS/UMD 转换为 ESM
性能优化：将许多小模块合并为一个模块，减少请求
缓存：预构建结果被缓存，加速后续启动

node_modules/.vite/deps/
├── _metadata.json
├── vue.js
├── axios.js
└── lodash.js

按需编译

当浏览器请求一个模块时：

请求: /src/components/Button.vue
↓
Vite 拦截请求
↓
编译 Button.vue（使用 @vitejs/plugin-vue）
↓
返回编译后的 JS 模块

源码映射

Vite 自动为编译后的代码生成 Source Map，方便调试。

生产环境

使用 Rollup 构建

生产环境使用 Rollup 进行打包：

代码分割：自动分割代码块
Tree Shaking：移除未使用的代码
压缩优化：CSS、JS 压缩
资源处理：图片、字体等资源处理

CSS 代码分割

Vite 自动提取 CSS 到单独文件：

dist/
├── assets/
│   ├── index.abc123.js
│   ├── index.def456.css
│   └── logo.789xyz.png
└── index.html

Vite 的配置

基础配置

javascript

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
});

插件配置

javascript

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    vue(),
    react(),
    legacy({
      targets: ['ie >= 11']
    })
  ]
});

环境变量

javascript

// .env.development
VITE_API_URL=http://localhost:3000/api

// .env.production
VITE_API_URL=https://api.example.com

// 使用
const apiUrl = import.meta.env.VITE_API_URL;

Vite 的优点

开发体验极佳

毫秒级冷启动
即时热更新
无需等待打包
开发服务器响应迅速

配置简单

开箱即用，零配置启动
合理的默认配置
配置文件简洁明了
支持多种框架预设

构建性能优秀

利用原生 ES Module
按需编译减少等待
预构建依赖优化
生产构建高效

现代化架构

原生支持 ES Module
支持 TypeScript
支持 JSX/TSX
支持 CSS 预处理器

生态系统完善

支持主流框架（Vue、React、Svelte）
丰富的插件生态
活跃的社区支持
完善的文档

Vite 的缺点

浏览器兼容性

开发环境需要支持 ES Module 的现代浏览器
旧浏览器需要额外配置
生产环境可能需要 polyfill

生态成熟度

相比 Webpack 生态较新
部分 Webpack 插件不兼容
某些场景需要适配

生产构建限制

使用 Rollup，某些 Webpack 特性不支持
复杂的构建需求可能受限
某些优化策略需要手动配置

特定场景问题

CommonJS 模块需要预构建
大量小文件依赖可能影响性能
SSR 支持相对较新

Vite 与 Webpack 的区别

特性	Vite	Webpack
开发服务器启动	毫秒级	秒级到分钟级
热更新速度	极快	随项目增长变慢
构建方式	原生 ESM + Rollup	Bundle-based
配置复杂度	简单	复杂
生态成熟度	发展中	成熟
学习曲线	平缓	陡峭

Vite 插件开发

插件结构

javascript

export default function myPlugin() {
  return {
    name: 'my-plugin',
    
    enforce: 'pre',
    
    apply: 'build',
    
    config(config, { command }) {
      return {
        // 修改配置
      };
    },
    
    configResolved(resolvedConfig) {
      // 配置解析完成
    },
    
    transform(code, id) {
      // 转换代码
      return code;
    },
    
    load(id) {
      // 自定义加载
    },
    
    resolveId(source, importer) {
      // 自定义解析
    }
  };
}

常用插件钩子

钩子	触发时机
config	修改配置前
configResolved	配置解析后
transform	转换模块代码
load	加载模块
resolveId	解析模块 ID
buildStart	构建开始
buildEnd	构建结束
closeBundle	构建完成

常用插件

官方插件

插件	用途
@vitejs/plugin-vue	Vue 3 支持
@vitejs/plugin-vue-jsx	Vue JSX 支持
@vitejs/plugin-react	React 支持
@vitejs/plugin-legacy	旧浏览器支持

社区插件

插件	用途
vite-plugin-compression	压缩资源
vite-plugin-imagemin	图片压缩
vite-plugin-pwa	PWA 支持
vite-plugin-svg-icons	SVG 图标
vite-plugin-mock	Mock 数据

性能优化

依赖预构建优化

javascript

export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'axios'],
    exclude: ['your-local-package']
  }
});

构建优化

javascript

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          utils: ['lodash', 'dayjs']
        }
      }
    },
    chunkSizeWarningLimit: 1000
  }
});

CSS 优化

javascript

export default defineConfig({
  css: {
    devSourcemap: true,
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
});

Vite 的应用场景

Vue 3 项目（官方推荐）
React 项目开发
Svelte 项目
现代浏览器应用
需要快速开发迭代的项目
中小型前端项目
组件库开发

命令行工具

bash

# 创建项目
npm create vite@latest my-app

# 指定模板
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template react-ts

# 启动开发服务器
vite

# 构建生产版本
vite build

# 预览生产构建
vite preview

支持的模板

模板	命令
Vue	--template vue
Vue + TS	--template vue-ts
React	--template react
React + TS	--template react-ts
Svelte	--template svelte
Svelte + TS	--template svelte-ts
Vanilla	--template vanilla
Vanilla + TS	--template vanilla-ts

React 基础与核心思想

React 状态管理方案

React Hooks 深度解析

React 性能优化与新特性

渲染和性能

DOM/事件模型

异步/网络/安全

前端攻防安全

经典布局案例

Vite 介绍 ​

什么是 Vite ​

Vite 的核心特点 ​

极速的开发服务器启动 ​

即时的热模块替换（HMR） ​

按需编译 ​

优化的生产构建 ​

Vite 的工作原理 ​

开发环境 ​

利用原生 ES Module ​

依赖预构建 ​

按需编译 ​

源码映射 ​

生产环境 ​

使用 Rollup 构建 ​

CSS 代码分割 ​

Vite 的配置 ​

基础配置 ​

插件配置 ​

环境变量 ​

Vite 的优点 ​

开发体验极佳 ​

配置简单 ​

构建性能优秀 ​

现代化架构 ​

生态系统完善 ​

Vite 的缺点 ​

浏览器兼容性 ​

生态成熟度 ​

生产构建限制 ​

特定场景问题 ​

Vite 与 Webpack 的区别 ​

Vite 插件开发 ​

插件结构 ​

常用插件钩子 ​

常用插件 ​

官方插件 ​

社区插件 ​

性能优化 ​

依赖预构建优化 ​

构建优化 ​

CSS 优化 ​

Vite 的应用场景 ​

命令行工具 ​

支持的模板 ​

Vite 介绍

什么是 Vite

Vite 的核心特点

极速的开发服务器启动

即时的热模块替换（HMR）

按需编译

优化的生产构建

Vite 的工作原理

开发环境

利用原生 ES Module

依赖预构建

按需编译

源码映射

生产环境

使用 Rollup 构建

CSS 代码分割

Vite 的配置

基础配置

插件配置

环境变量

Vite 的优点

开发体验极佳

配置简单

构建性能优秀

现代化架构

生态系统完善

Vite 的缺点

浏览器兼容性

生态成熟度

生产构建限制

特定场景问题

Vite 与 Webpack 的区别

Vite 插件开发

插件结构

常用插件钩子

常用插件

官方插件

社区插件

性能优化

依赖预构建优化

构建优化

CSS 优化

Vite 的应用场景

命令行工具

支持的模板