Vite vs Webpack：2026年你应该选择哪个构建工具？

构建工具决定了你的开发体验。缓慢的构建会扼杀生产力。到2026年，Vite 已成为新项目的默认选择——但 Webpack 仍有其用武之地。以下是决定性的对比。

10秒总结

结论：新项目 → Vite。企业遗留项目 → 保留 Webpack。

为什么 Vite 在开发中更快

Webpack：先打包所有内容

传统打包器：
1. 发现所有文件
2. 将所有内容打包在一起  ← 这很耗时！
3. 启动开发服务器
4. 提供打包后的内容

Vite：按需提供文件

Vite 方法：
1. 立即启动开发服务器  ← 300ms！
2. 使用 esbuild 预打包依赖（仅一次）
3. 当浏览器请求文件时，即时转换该文件
4. 开发期间无需打包！

Vite 在开发期间使用浏览器原生 ES 模块。当你导入某个模块时，浏览器发起请求，Vite 转换并提供该特定文件。

设置 Vite

# 创建新项目
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev  # 约300ms启动！

// vite.config.ts
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': 'http://localhost:8080',  // 代理 API 请求
    },
  },
  
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],  // 拆分 vendor 块
          router: ['react-router-dom'],
        },
      },
    },
  },
});

设置 Webpack 5

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev css-loader style-loader html-webpack-plugin

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: './src/index.tsx',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        type: 'asset/resource',
      },
    ],
  },
  
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    !isDev && new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  ].filter(Boolean),
  
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  
  devServer: {
    port: 3000,
    hot: true,
    historyApiFallback: true,
    proxy: { '/api': 'http://localhost:8080' },
  },
};

性能基准测试

冷启动（全新启动）

小型应用（50个模块）：
  Vite:    320ms
  Webpack: 3.2s

中型应用（500个模块）：
  Vite:    450ms
  Webpack: 18s

大型应用（2000个模块）：
  Vite:    800ms
  Webpack: 45s

热模块替换（代码更改后）

组件小改动：
  Vite:    ~50ms（仅转换更改的文件）
  Webpack: ~800ms（重新打包受影响的模块）

大型组件树：
  Vite:    ~100ms
  Webpack: ~3000ms

生产构建

中型应用：
  Vite (Rollup):  8s
  Webpack:        12s
  
大型应用：
  Vite:           25s
  Webpack:        35s（优化配置后相近）

生产构建速度相当——主要区别在于开发体验。

Vite 插件生态系统

// 常用 Vite 插件
import react from '@vitejs/plugin-react';          // React 支持
import vue from '@vitejs/plugin-vue';               // Vue 支持
import svelte from '@sveltejs/vite-plugin-svelte'; // Svelte 支持
import { VitePWA } from 'vite-plugin-pwa';         // PWA 支持
import svgr from 'vite-plugin-svgr';               // 将 SVG 导入为 React 组件
import tsconfigPaths from 'vite-tsconfig-paths';   // 使用 tsconfig 路径

export default defineConfig({
  plugins: [
    react(),
    svgr(),
    tsconfigPaths(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico'],
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff',
      },
    }),
  ],
});

Webpack 高级特性

Webpack 在某些领域仍然胜出：

模块联邦（微前端）

// Webpack Module Federation — 跨应用共享组件
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

// 在代码中使用
const RemoteButton = React.lazy(() => import('app1/Button'));

自定义 Loader

// webpack 自定义 loader 处理 markdown 文件
module.exports = function(source) {
  const html = markdownToHtml(source);
  return `module.exports = ${JSON.stringify(html)}`;
};

何时使用哪种工具

选择 Vite 当：

• 启动新项目（React、Vue、Svelte）
• 开发体验优先
• 希望最小化配置
• 使用现代框架（Next.js 内部仍使用它）
• 团队偏好约定优于配置

选择 Webpack 当：

• 已有 Webpack 项目（迁移成本通常不值得）
• 需要模块联邦实现微前端
• 复杂的自定义构建流水线
• 旧版浏览器支持要求（IE11）
• 大型企业项目，使用自定义 loader
• 需要高级代码拆分策略

从 Webpack 迁移到 Vite

# 1. 安装 Vite
npm install --save-dev vite @vitejs/plugin-react

# 2. 将 index.html 移到根目录（从 public/）
# 3. 更新 index.html — 移除 %PUBLIC_URL%，添加 <script type="module">

# 4. 替换环境变量
# Webpack: process.env.REACT_APP_API_URL
# Vite:    import.meta.env.VITE_API_URL

# 5. 更新导入（静态文件）
# Webpack: require('./logo.png')
# Vite:    import logo from './logo.png'

// 迁移后的 CRA 项目的 vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  // CRA 兼容性
  define: {
    'process.env': process.env, // 如果你使用 process.env（不推荐）
  },
});

总结

在2026年，Vite 是新项目的明确选择。10-100倍更快的开发启动速度和近乎即时的 HMR 极大地提升了开发者的生产力。Webpack 仍然适用于：

• 现有项目，迁移成本不值得
• 模块联邦/微前端架构
• 复杂的自定义构建需求

→ 使用 Benchmark Builder 基准测试你的构建性能。