vue项目webpack、vite、rollup、parcel四种构建工具对比

香蕉可乐荷包蛋

于 2025-05-26 07:57:16 发布

阅读量1k

点赞数 37

分类专栏： vue 前端文章标签： vue.js webpack 前端

本文链接：https://blog.csdn.net/Jcrows/article/details/148212934

版权

以下是 Vue 项目中使用 Webpack 与其他主流构建工具（Vite、Rollup、Parcel）的对于项目的使用对比：

一、核心工具对比

特性	Webpack	Vite	Rollup	Parcel
构建原理	Bundle-based（打包）	ESM-based（原生模块）	Bundle-based（专注库）	Zero-config（自动分析）
开发速度	较慢（全量打包）	极快（按需编译）	中等	快（缓存优化）
生产打包	强大（代码分割/优化）	使用Rollup	极简（适合库）	自动优化
配置复杂度	高（需手动配置）	中（预设+Vue插件）	中（插件系统）	无（零配置）
Tree Shaking	支持（需配置）	优秀（ESM原生支持）	极佳（默认启用）	支持
HMR性能	中等（重建依赖图）	极快（基于ESM）	不适用	快
适用场景	复杂企业级应用	现代Vue3项目	Vue组件库开发	快速原型开发

二、具体场景分析

1. 开发体验

Vite

# 启动时间对比
Vite: 100ms ~ 500ms   # 利用浏览器原生ESM
Webpack: 10s ~ 30s    # 需构建完整依赖图

优势：修改代码后几乎即时更新，适合快速迭代。

Webpack
```
// 需要配置devServer
devServer: {
     
  hot: true,
  port: 8080
}
```
- 痛点：项目越大启动越慢，但生态插件丰富（如微前端支持）。

2. 生产构建

Webpack

optimization: {
     
  splitChunks: {
      chunks: 'all' }, // 精细代码分割
  minimizer: [new TerserPlugin()] // 压缩优化
}

优势：对复杂场景（如动态导入、长效缓存）支持更成熟。

Vite

build: {
     
  rollupOptions: {
     
    output: {
     
      manualChunks: (id) => {
     
        if (id.includes('node_modules')) return 'vendor'
      }
    }
  }
}