Vite-从0开始-20260408

Vite

一、Vite 原理

1. Vite 是什么？

问题：Vite 是什么？

答案： 核心回答：Vite 是基于 ES Modules 的下一代前端构建工具，利用浏览器原生 ESM 实现极速开发体验。

代码示例：

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

export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
        hot: true
    },
    build: {
        target: 'es2015',
        minify: 'terser'
    }
});

// package.json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}

---

2. Vite 为什么快？

问题：Vite 为什么快？

答案： 核心回答：Vite 利用浏览器 ESM 按需加载，无需打包，开发启动快。

代码示例：

// 开发模式对比
// Webpack: 入口 → 递归解析依赖 → 打包所有模块 → 启动服务
// Vite: 启动服务 → 浏览器请求模块 → 按需编译

// Vite 工作原理
// 1. 开发时：原生 ESM + 热更新
// 2. 生产时：Rollup 打包

// 依赖预构建
// 使用 esbuild 预构建依赖，将 CJS 转为 ESM
// 合并多个小模块为一个
import Vue from 'vue'; // 预构建后变成一个文件

---

二、与 Webpack 对比

3. Vite 与 Webpack 的区别

问题：Vite 与 Webpack 的区别

答案： 核心回答：Vite 基于 ESM 无需打包，Webpack 打包所有模块。

方面	Vite	Webpack
开发启动	秒级	慢（需打包）
热更新	按需更新	重新打包
生产构建	Rollup	自有打包
生态	较少	丰富
兼容性	现代浏览器	所有浏览器

---

三、常用配置

4. Vite 常用配置

问题：Vite 常用配置

答案： 核心回答：包括插件、代理、别名、环境变量等配置。

代码示例：

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

export default defineConfig({
    // 插件
    plugins: [vue()],
    
    // 路径别名
    resolve: {
        alias: {
            '@': '/src'
        }
    },
    
    // 开发服务器
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true
            }
        }
    },
    
    // CSS 配置
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/styles/variables.scss";`
            }
        }
    },
    
    // 环境变量
    envDir: './env',
    envPrefix: 'VITE_'
});