⚡ 30 秒速记

• 核心判断：构建工具从入口解析依赖图，经转换和优化生成可在目标运行时加载的模块与资源
• 原理主线：围绕 「快速上手」、「Code Splitting」、「写在最后」 建立输入、状态变化与输出之间的因果关系
• 文章范围：对比分析了 Webpack 和 Rollup 两大前端打包工具的原理、功能和适用场景，帮助开发者根据项目需求选择合适的打包方案，并通过示例演示 Rollup 的基本用法。
• 边界与代价：静态分析受模块语法、动态依赖和副作用声明限制；拆包过细也会增加请求和运行时成本
• 工程落地：优化前先测构建阶段、产物组成和缓存命中，再针对解析、转换、压缩或运行时逐层处理

应用开发通常选 Webpack，类库或框架开发更适合选 Rollup。 Webpack 的工程化能力更完整，适合需要第三方模块、代码拆分和 HMR 的复杂应用；Rollup 更专注于 ES Modules，产物扁平、可读，并默认支持 Tree-shaking。我一般会让组件库用 Rollup 输出多种模块格式，让业务应用交给 Webpack。这只是经验原则，两者都能跨场景使用，最终还要看插件生态和构建需求。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Rollup 是一款 ES Modules 打包器。它也可以将项目中散落的细小模块打包为整块代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。

从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多。因为 Webpack 在配合一些插件的使用下，几乎可以完成开发过程中绝大多数前端工程化的工作。而 Rollup 可以说仅仅是一个 ES Modules 打包器，没有更多其他的功能了。

例如，在 Webpack 中支持 HMR 这种对开发过程十分友好的功能，而在 Rollup 中就没有办法完全支持。

Rollup 诞生的目的并不是要与 Webpack 这样的工具全面竞争。它的初衷只是希望能够提供一个高效的 ES Modules 打包器，充分利用 ES Modules 的各项特性，构建出结构扁平，性能出众的类库。