前端打包工具对比（Webpack、Vite、Rollup）

前端打包工具对比（Webpack、Vite、Rollup）

核心差异
Webpack 基于打包器架构，Vite 基于原生 ESM 的按需编译，Rollup 专注于 ES模块的高效打包。性能、配置复杂度和适用场景是主要区分点。

---

Webpack

特点

• 成熟度高，生态插件丰富（如 Babel-loader、CSS-loader）。
• 支持代码分割、树摇、热更新等完整功能。
• 配置复杂，适合大型项目但构建速度较慢。

典型配置示例

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader' }]
  }
};

---

Vite

特点

• 开发模式下利用浏览器原生 ESM，启动速度极快（毫秒级）。
• 生产环境使用 Rollup 打包，兼顾性能与优化。
• 内置对 Vue/React/TS 的开箱支持，配置简单。

优势场景

• 开发体验优先的项目（如快速原型开发）。
• 现代浏览器兼容的轻量级应用。

示例配置

// vite.config.js
export default {
  build: {
    rollupOptions: { output: { dir: 'dist' } }
  }
};

---

Rollup

特点

• 专为库/组件开发设计，输出更干净的 ES模块。
• 树摇优化效率极高，适合发布到 npm 的库。
• 插件生态较 Webpack 少，不擅长处理静态资源。

代码示例

// rollup.config.js
export default {
  input: 'src/main.js',
  output: { file: 'bundle.js', format: 'esm' }
};

---

对比总结

工具	构建速度	配置复杂度	适用场景
Webpack	慢	高	企业级复杂应用
Vite	极快	低	开发体验优先项目
Rollup	中等	中	库/组件开发

选择建议

• 需要 HMR 和完整生态选 Webpack。
• 追求开发速度选 Vite。
• 开发开源库优先考虑 Rollup。