webpack 和 rollup

相同点：webpack 与 rollup 都是用来打包项目的 JavaScript 模块工具。

实际使用：开发应用时用 webpack，开发库时使用 rollup。

一、Webpack 的适用场景与优势

1. 复杂应用的模块化与资源管理

Webpack 的核心优势在于处理多类型资源整合和复杂依赖管理，尤其适合企业级应用开发：

  • 模块化支持：支持 CommonJS、ES6、AMD 等多种模块规范，能够无缝整合第三方库和框架（如 React、Vue）。
  • 资源处理能力：通过 Loaders（如 css-loader、file-loader）统一处理 CSS、图片、字体等非 JS 资源，简化构建流程。
  • 开发效率优化：
    • 热模块替换（HMR）：实时更新模块代码，避免刷新页面，提升开发体验。
    • 代码分割（Code Splitting）：按需加载代码块，减少首屏加载时间。

2. 生态与扩展性

  • 插件系统：支持丰富的插件生态（如 HtmlWebpackPlugin、MiniCssExtractPlugin），实现自动化 HTML 生成、CSS 提取等高级功能。
  • 工程化兼容性：与 Babel、TypeScript、ESLint 等工具链深度集成，适合需要复杂构建流程的大型项目。

二、Rollup 的适用场景与优势

1. 库开发的代码精简性

Rollup 的核心优势在于 Tree-shaking 与代码体积控制，适合纯 JS 库或框架开发：

  • 静态分析优化：通过 ES6 模块的静态特性，精准剔除未使用代码（Dead Code Elimination），生成更小的产物体积。
  • 输出格式灵活性：支持 ESM、CJS、UMD 等多种模块规范，方便库的跨环境使用。

2. 轻量化与性能

  • 简洁的打包逻辑：不包含运行时依赖（如 Webpack 的 __webpack_require__），产物体积更小，执行效率更高。
  • 快速构建速度：对纯 JS 项目的打包速度显著优于 Webpack（尤其是小型库）。

为什么 rollup 打包体积更小

一、静态分析与 Tree-shaking 的深度优化

  • ES6 模块的静态结构支持：Rollup 基于 ES6 模块的静态特性（如 import/export 只能在顶层声明），能够精准分析代码依赖关系，彻底剔除未被引用的代码（Dead Code Elimination）。
  • 对比 Webpack：Webpack 虽然支持 Tree-shaking，但其对 CommonJS 等动态模块的兼容性需求导致静态分析不彻底，可能残留未使用的代码。
  • 无运行时依赖的纯净输出：Rollup 生成的代码不包含模块加载器（如 Webpack 的 __webpack_require__），直接输出原始模块逻辑，减少了运行时代码的冗余。

二、模块处理机制与代码分割策略

  • 专注 ES6 模块的高效性：Rollup 原生针对 ES6 模块优化，无需处理 CommonJS、AMD 等多模块格式的兼容逻辑，避免了额外代码的引入（如模块包装代码）。
  • Webpack 的负担：Webpack 需支持多种模块规范，打包时需插入模块兼容逻辑，导致体积膨胀。
  • 更简洁的代码分割逻辑：Rollup 的代码分割基于静态依赖分析，仅保留实际用到的代码块；而 Webpack 的代码分割可能因动态加载（如 import()）引入冗余的分割逻辑。

三、插件生态与输出格式的轻量化

  • 插件系统的精简性：Rollup 的插件专注于代码处理（如 TypeScript 转换），不引入复杂运行时逻辑；而 Webpack 的插件生态（如 HtmlWebpackPlugin）可能增加非必要的代码。
  • 多格式输出的体积优化：Rollup 支持按需生成 ESM、CJS、UMD 等格式，针对不同场景优化输出。例如，生成 ESM 格式时可保留原模块结构，避免模块包装代码。

补充

补充：使用选择建议：

  • 业务应用 / 多页面站点（有 CSS、图片、字体、SSR、HMR、代码分割等需求）→ 选 webpack。
  • 类库 / 框架（输出 ESM 友好、追求最小体积）→ 选 Rollup，React、Vue、Vite、Terser 等都使用 Rollup。
  • 关键差异速览：
    1. 输出格式：webpack 把每个模块包进 IIFE（__webpack_require__）实现运行时加载；Rollup 输出扁平、可读的 ES Module 代码，几乎无运行时。
    2. Tree Shaking：Rollup 基于 ESM 静态结构，剔除未使用代码更彻底；webpack 在 ESM 模式下也能 tree-shake，但因需要兼容 CommonJS 等动态模块，效果略逊。
    3. 代码分割：webpack 内置 splitChunks / 动态 import()；Rollup 直到近年才补齐 dynamic import 能力，且不如 webpack 灵活。
    4. 生态：webpack loader/plugin 生态庞大；Rollup 插件更聚焦代码转换场景。
    5. HMR / 开发体验：webpack-dev-server 完整支持 HMR、proxy；Rollup 多用于生产构建，配合 Vite 等开发服务器使用。
  • 现代组合拳：Vite 开发时 esbuild + 浏览器 ESM，生产用 Rollup；Webpack 5 + esbuild-loader 加速构建，融合了两者优势。

来源整理自：我的有道云笔记