vite学习笔记

Vite（法语意为"快速"）是新一代前端构建工具，由 Vue.js 创始人尤雨溪开发，具有以下核心特性：

极速启动：冷启动时间比传统工具快 10-100 倍

闪电热更新：HMR 更新速度不受项目规模影响

智能构建：生产环境使用 Rollup 打包

原生 ESM：基于浏览器原生 ES 模块系统

与传统打包工具对比

特性	Webpack	Vite
启动机制	全量打包	按需编译
模块系统	模拟 CommonJS	原生 ESM
HMR 效率	线性增长	恒定时间
构建工具	自研打包	Rollup
开发服务器	内存文件系统	真实文件系统

技术栈支持

技术	支持方式	示例配置
Vue	官方插件	@vitejs/plugin-vue
React	官方插件	@vitejs/plugin-react
TypeScript	原生支持	零配置
CSS 预处理器	内置支持	.scss/.less 直接导入
静态资源	智能处理	自动路径处理

快速开始：

创建项目

npm create vite@latest my-project -- --template vue-ts

目录结构

my-project/
├── node_modules
├── src/
│ ├── main.ts
│ ├── App.vue
│ └── ...
├── index.html
├── vite.config.ts
└── package.json

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          lodash: ['lodash-es']
        }
      }
    }
  }
})

性能优化：

构建优化策略

优化方向	实现方案	配置示例
依赖预构建	optimizeDeps 配置	optimizeDeps: { include: ['lodash-es'] }
代码分割	动态 import + rollup 配置	manualChunks 配置
图片压缩	vite-plugin-imagemin	自动 PNG/JPG 优化
Gzip 压缩	vite-plugin-compression	预生成压缩文件

加载优化方案

// 典型配置组合
export default defineConfig({
build: {
cssCodeSplit: true,
assetsInlineLimit: 4096, // 4KB以下资源内联
sourcemap: 'hidden',
minify: 'terser'
}
})

推荐使用场景

1. 现代浏览器项目（Chrome >=61, Firefox >=60, Safari >=11）

2. 框架新项目（Vue3/React18/Svelte）

3. 库开发（利用 Rollup 的纯净打包）

4. 微前端子应用（快速加载需求）

暂不推荐场景

1. 需要支持 IE11 的项目

2. 已有复杂 Webpack 配置的大型项目

3. 需要深度自定义构建流程的特殊需求