Rollup打包Vue组件库的实践与优化

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

在 Vue 生态中，webpack 一直是主流的打包工具，但近年来 Rollup 在库和组件打包领域逐渐崭露头角。我第一次在生产环境使用 Rollup 打包 Vue 组件库是在2018年，当时需要构建一个高性能的 UI 组件库，webpack 的包体积和 Tree-shaking 效果都不尽如人意。

Rollup 的核心优势在于其基于 ES Module 的设计理念。与 webpack 不同，Rollup 从设计之初就专注于 JavaScript 库的打包，它生成的代码更加干净、紧凑。实测数据显示，同样的 Vue 组件，Rollup 打包后的体积平均比 webpack 小15-20%。这对于需要被频繁加载的前端库来说至关重要。

重要提示：如果你的项目是应用级项目（如完整的 SPA），webpack 可能仍是更好的选择。Rollup 更适合库/组件级别的打包。

2. 基础环境搭建

2.1 初始化项目结构

典型的 Vue + Rollup 项目目录应该这样组织：

code复制my-vue-lib/
├── src/               # 源代码
│   ├── components/    # Vue 组件
│   ├── index.js       # 入口文件
├── dist/              # 输出目录
├── rollup.config.js   # Rollup 配置文件
└── package.json

关键 package.json 配置示例：

json复制{
  "name": "my-vue-lib",
  "version": "1.0.0",
  "main": "dist/my-vue-lib.cjs.js",
  "module": "dist/my-vue-lib.esm.js",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c"
  }
}

2.2 核心依赖安装

需要安装的 npm 包：

bash复制npm install -D rollup \
               rollup-plugin-vue@6.0.0 \
               @rollup/plugin-node-resolve \
               @rollup/plugin-commonjs \
               rollup-plugin-terser \
               @vue/compiler-sfc

这里有几个关键点需要注意：

1. rollup-plugin-vue 的 6.x 版本专为 Vue 3 设计，如果是 Vue 2 项目需要使用 5.x 版本
2. @vue/compiler-sfc 是 Vue 单文件组件的编译器，必须与 Vue 主版本匹配
3. @rollup/plugin-node-resolve 用于解析 node_modules 中的第三方模块

3. Rollup 配置详解

3.1 基础配置文件

完整的 rollup.config.js 示例：

javascript复制import vue from 'rollup-plugin-vue'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/my-vue-lib.esm.js',
      format: 'esm',
      sourcemap: true
    },
    {
      file: 'dist/my-vue-lib.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/my-vue-lib.global.js',
      format: 'iife',
      name: 'MyVueLib',
      globals: {
        vue: 'Vue'
      }
    }
  ],
  plugins: [
    vue({
      css: true,
      compileTemplate: true
    }),
    resolve(),
    commonjs(),
    terser()
  ],
  external: ['vue']
}

3.2 关键配置解析

1. 输出格式选择：

   • esm: 现代打包标准，支持 Tree-shaking
   • cjs: CommonJS 格式，Node 环境使用
   • iife: 浏览器直接使用的全局变量模式

2. Vue 插件配置：

   • css: true 表示提取 CSS 到单独文件
   • compileTemplate: true 启用模板编译

3. 外部依赖处理：

   • external: ['vue'] 确保 Vue 不会被打包进最终产物
   • globals 配置指定 IIFE 模式下如何获取外部依赖

4. Vue 组件编写规范

4.1 单文件组件注意事项

为了让 Rollup 正确处理 Vue SFC，需要遵循一些特殊规范：

vue复制<template>
  <!-- 避免使用 src 引入模板 -->
  <div class="my-component">
    {{ msg }}
  </div>
</template>

<script>
// 使用具名导出而非默认导出
export const MyComponent = {
  name: 'MyComponent',
  props: {
    msg: String
  }
}
</script>

<style module>
/* 使用 CSS Modules 避免样式冲突 */
.my-component {
  color: red;
}
</style>

4.2 入口文件设计

src/index.js 应该这样组织：

javascript复制import { MyComponent } from './components/MyComponent.vue'

// 统一导出所有组件
export { MyComponent }

// 提供全局安装方法
export function install(app) {
  app.component('MyComponent', MyComponent)
}

// 自动安装（当以 script 标签引入时）
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use({ install })
}

5. 高级优化技巧

5.1 代码分割与懒加载

对于大型组件库，可以使用动态导入实现按需加载：

javascript复制// src/index.js
export * from './components/MyComponent.vue'
export const AsyncComponent = () => import('./components/AsyncComponent.vue')

然后在 Rollup 配置中启用代码分割：

javascript复制export default {
  output: {
    chunkFileNames: '[name]-[hash].js'
  },
  // ...
}

5.2 CSS 提取优化

使用 rollup-plugin-postcss 实现更强大的 CSS 处理：

javascript复制import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      extract: true,
      minimize: true,
      modules: true,
      use: ['sass']
    }),
    // ...
  ]
}

6. 常见问题排查

6.1 Vue 版本不匹配问题

典型错误：

code复制Error: [vue-compiler] Cannot find module 'vue/compiler-sfc'

解决方案：

1. 确保安装的 @vue/compiler-sfc 版本与项目中的 Vue 版本一致
2. Vue 2 项目应使用 rollup-plugin-vue@5.x

6.2 样式丢失问题

如果发现样式未生效：

1. 检查 rollup-plugin-vue 的 css 选项是否开启
2. 确保没有在组件中使用 scoped 样式（推荐使用 CSS Modules）
3. 检查 PostCSS 配置是否正确加载了 autoprefixer 等插件

6.3 Tree-shaking 失效

确保：

1. 使用 ES Module 格式导出（output.format: 'esm'）
2. 组件使用具名导出而非默认导出
3. package.json 中指定 "module": "dist/my-vue-lib.esm.js"

7. 构建性能优化

7.1 缓存配置

通过 rollup-plugin-cache 显著提升二次构建速度：

javascript复制import cache from 'rollup-plugin-cache'

export default {
  plugins: [
    cache({
      // 缓存目录
      cacheDirectory: '.rollup_cache'
    }),
    // ...
  ]
}

7.2 并行处理

使用 rollup-plugin-multi-thread 加速大型项目构建：

javascript复制import { multiThread } from 'rollup-plugin-multi-thread'

export default {
  plugins: [
    multiThread({
      // 线程数，建议设置为 CPU 核心数-1
      threadCount: 3
    }),
    // ...
  ]
}

8. 完整构建流程示例

8.1 开发构建配置

添加开发专用的 Rollup 配置（rollup.config.dev.js）：

javascript复制import baseConfig from './rollup.config.js'
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

export default {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins,
    serve({
      open: true,
      contentBase: ['dist', 'demo'],
      port: 8080
    }),
    livereload('dist')
  ],
  watch: {
    include: 'src/**'
  }
}

8.2 生产构建优化

生产环境配置应包含：

1. 更激进的代码压缩
2. 移除调试代码
3. 生成分析报告

javascript复制import { visualizer } from 'rollup-plugin-visualizer'

export default {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins,
    visualizer({
      filename: 'bundle-analysis.html',
      open: true
    })
  ]
}

9. 与 webpack 的对比实践

9.1 构建速度对比

基于实际项目测试数据（100+ Vue 组件）：

9.2 适用场景建议

1. 选择 Rollup 当：

   • 构建可复用的 Vue 组件库
   • 需要极致的包体积优化
   • 项目主要由 ES Module 组成

2. 选择 webpack 当：

   • 构建完整的 Vue 应用
   • 需要强大的开发服务器功能
   • 项目包含大量静态资源

10. 实际项目经验分享

在最近的企业级 UI 组件库项目中，我们通过以下优化使最终包体积减少了40%：

1. 按需导出策略：

javascript复制// 避免这种写法
export default { /* 所有组件 */ }

// 改用这种
export { Button } from './Button.vue'
export { Input } from './Input.vue'

2. 样式变量提取：
   将所有 SCSS 变量提取到单独文件，通过 rollup-plugin-postcss 的 inject 选项共享

3. 运行时优化：

javascript复制// 移除不必要的 Vue 特性
import { compile } from 'vue/dist/vue.runtime.esm-bundler'

4. 构建产物分析：
   定期使用 rollup-plugin-visualizer 分析包组成，找出可以优化的依赖

关键教训：在打包 Vue 3 组件时，一定要显式标记响应式属性，否则 Rollup 的 Tree-shaking 可能会误删必要代码。