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

最新推荐文章于 2025-10-11 12:22:12 发布

原创最新推荐文章于 2025-10-11 12:22:12 发布 · 343 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #node.js

前端打包工具对比（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。