vite学习笔记

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

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

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

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

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

与传统打包工具对比

 技术栈支持

快速开始：

# 创建项目
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']
        }
      }
    }
  }
})

性能优化：

构建优化策略

加载优化方案

// 典型配置组合
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. 需要深度自定义构建流程的特殊需求