跳到主要内容

Vite

Vite 适合现代前端项目的原因，不只是“快”，而是它把开发阶段和生产构建阶段拆得很清楚。

Vite 解决什么问题​

  • 本地开发启动慢
  • 模块多了以后 HMR 变慢
  • 传统打包工具配置复杂

两个阶段要分开理解​

开发阶段​

  • 基于原生 ESM 按需加载模块
  • 改一个文件，只让相关模块重新加载
  • 启动速度通常明显快于传统全量打包方案

生产构建阶段​

  • 底层使用 Rollup 输出最终产物
  • 支持代码分割、资源处理、压缩和产物优化

常见配置​

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

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

前端最常用的几个点​

  • 别名配置
  • 开发代理
  • 环境变量 import.meta.env
  • 构建输出目录和资源目录
  • 插件系统

使用建议​

  • 新项目默认优先考虑 Vite
  • 如果项目已经深度依赖 Webpack 的 loader / plugin 生态，再评估迁移成本
  • 环境变量只暴露真正需要给前端的内容，避免把服务端配置直接带进浏览器