构建工具对比

Webpack vs Vite vs Rollup

核心定位

开发体验对比

启动速度

Vite 优势：

• 开发服务器启动几乎瞬间完成
• 基于浏览器原生 ES modules
• 按需编译，只编译请求的模块

Webpack 劣势：

• 需要先打包所有模块
• 项目越大启动越慢
• 首次启动可能需要几十秒

热更新（HMR）

Vite HMR 原理：

• 只更新修改的模块
• 保持应用状态
• 更新速度与项目大小无关

Webpack HMR：

• 需要重新打包相关模块
• 更新速度随项目增大而变慢

构建性能对比

生产构建速度

Vite 生产构建：

• 使用 esbuild 进行代码转换（比 Babel 快 10-100 倍）
• 使用 Rollup 进行打包
• 并行处理，充分利用多核 CPU

Webpack 生产构建：

• 使用 Babel 进行代码转换
• 功能全面但速度相对较慢
• 可以通过配置优化（如使用 esbuild-loader）

输出代码质量

Rollup Tree Shaking：

• 默认启用，效果最好
• 静态分析，移除未使用代码
• 适合库开发

Vite Tree Shaking：

• 基于 Rollup，效果优秀
• 生产环境自动启用

Webpack Tree Shaking：

• 需要配置启用
• 效果良好，但略逊于 Rollup

配置复杂度对比

基础配置

Webpack：

// webpack.config.js - 配置复杂
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin(),
  ],
};

Vite：

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

export default defineConfig({
  plugins: [vue()],
});

Rollup：

// rollup.config.js - 配置中等
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
  },
  plugins: [resolve(), commonjs()],
};

配置复杂度评分

功能特性对比

核心功能

插件生态

适用场景

Webpack 适合

✅ 大型企业级应用

• 复杂的构建需求
• 需要大量自定义配置
• 团队已有 Webpack 经验

✅ 需要特殊功能

• 代码分割策略复杂
• 需要自定义 loader
• 需要复杂的优化策略

✅ 遗留项目

• 已有 Webpack 配置
• 迁移成本高
• 团队熟悉 Webpack

Vite 适合

✅ 现代前端应用

• Vue 3、React、Svelte 等
• 使用 ES modules
• 追求开发体验

✅ 新项目

• 从零开始
• 不需要复杂配置
• 团队愿意尝试新技术

✅ 快速原型开发

• 需要快速启动
• 频繁修改代码
• 重视开发效率

Rollup 适合

✅ 库开发

• NPM 包开发
• 需要 Tree Shaking
• 追求代码体积最小

✅ 框架开发

• Vue、React 等框架
• 需要多格式输出
• 代码质量要求高

✅ 简单应用

• 功能简单
• 不需要复杂构建
• 追求构建速度

性能数据对比

启动时间（大型项目）

构建时间（生产环境）

输出体积（相同项目）

迁移建议

从 Webpack 迁移到 Vite

优势：

• 开发体验大幅提升
• 配置更简单
• 构建速度更快

注意事项：

• 某些 Webpack 特有功能需要替代方案
• 插件生态不同
• 需要测试兼容性

迁移步骤：

1. 安装 Vite 和相关插件
2. 创建 vite.config.js
3. 迁移配置项
4. 测试功能
5. 优化配置

从 Webpack 迁移到 Rollup

优势：

• 代码体积更小
• Tree Shaking 效果更好
• 配置更简单

注意事项：

• 不适合大型应用
• HMR 需要额外配置
• 某些功能需要插件支持

总结

选择建议

选择 Webpack 如果：

• 项目已经使用 Webpack
• 需要复杂的构建配置
• 团队熟悉 Webpack
• 需要大量自定义功能

选择 Vite 如果：

• 新项目或现代技术栈
• 重视开发体验
• 需要快速启动和 HMR
• 愿意尝试新技术

选择 Rollup 如果：

• 开发库或框架
• 追求代码体积最小
• 需要 Tree Shaking
• 项目相对简单

综合评分

未来趋势

• Vite 正在快速发展，生态不断完善
• Webpack 仍然是主流，但市场份额可能下降
• Rollup 在库开发领域地位稳固
• 三者可能会长期共存，各有适用场景