Rollup打包Vue项目实战与优化指南

1. 为什么选择 Rollup 打包 Vue 项目

第一次接触 Rollup 是在为组件库寻找轻量化打包方案时。当时 webpack 的打包体积让我头疼——基础配置生成的 bundle 就超过 40KB，这对于需要被频繁加载的 UI 组件来说简直是灾难。经过对比测试，同样的 Vue 单文件组件用 Rollup 打包后，体积直接缩减了 62%，这让我开始认真研究这个"打包界的轻量级选手"。

Rollup 的核心优势在于其基于 ES Modules 的静态分析能力。与 webpack 不同，它不会在每个模块外包裹一层函数作用域，而是直接将所有 ES6+ 的 import/export 语句进行扁平化处理。这种设计特别适合 Vue 这类现代前端框架，因为：

• Vue 3 的 Composition API 本身就是基于 ES Modules 的代码组织方式
• 单文件组件(.vue)在编译后本身就是标准的 ES Module
• 第三方依赖如 vue-router、pinia 也都遵循 ESM 规范

实战经验：在打包包含 20+ 组件的库时，Rollup 产物体积比 webpack 平均小 35-45%，Tree-shaking 效果更彻底

2. 基础环境搭建

2.1 初始化项目结构

推荐使用以下目录结构（以组件库为例）：

code复制my-vue-lib/
├── packages/      # 组件源码
│   ├── button/
│   │   ├── src/
│   │   │   └── Button.vue
│   │   └── index.js
├── rollup.config.js
└── package.json

关键配置项说明：

json复制{
  "type": "module",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^3.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-commonjs": "^24.0.0",
    "@vue/compiler-sfc": "^3.3.0"
  }
}

2.2 核心插件选型

1. @rollup/plugin-vue：处理 .vue 单文件组件

   • 必须配合 @vue/compiler-sfc 使用
   • 支持 Vue 3 的 <script setup> 语法

2. rollup-plugin-postcss：处理组件内样式

   • 自动提取 <style> 块内容
   • 支持 Sass/Less 预处理器（需额外安装）

3. @rollup/plugin-terser：代码压缩

   • 比 UglifyJS 对 ES6+ 支持更好
   • 可配置压缩参数

典型配置示例：

javascript复制import vue from '@rollup/plugin-vue'
import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    vue({
      css: false // 禁用内置 CSS 处理
    }),
    postcss({
      extract: true,
      plugins: []
    })
  ]
}

3. 高级打包策略

3.1 多格式输出配置

专业级