3-3 情景三：升级构建工具，webpack&rollup构建时效比较
升级流程
使用 npm-check-updates 批量升级依赖
当需要对项目进行全面的依赖升级时，npm-check-updates（简称 ncu）是一个非常实用的工具：
# 安装
npm install -g npm-check-updates
# 检查可升级的依赖
ncu
# 直接升级 package.json 中的版本号
ncu -u
# 只升级 webpack 相关依赖
ncu -f webpack,webpack-cli,webpack-dev-server
bash
执行 ncu 后会列出所有可升级的包，可以选择性地升级。
升级步骤
# 1. 提交当前代码
git add . && git commit -m "chore: before upgrade"
# 2. 升级 webpack 及相关插件
ncu -f webpack,webpack-cli,terser-webpack-plugin,clean-webpack-loader,css-loader -u
# 3. 重新安装依赖
npm install
# 4. 构建验证
npm run build
bash
Webpack vs Rollup 构建时效对比
对于同一个项目，使用 Webpack 和 Rollup 分别进行构建，对比其构建耗时。
测试环境
| 参数 | 值 |
|---|---|
| 项目类型 | JavaScript 库 |
| 文件数量 | ~50 个模块 |
| 代码行数 | ~5000 行 |
| Node.js | 18 LTS |
构建速度对比
| 构建工具 | 冷启动 | 增量构建 | 缓存后重建 |
|---|---|---|---|
| Webpack 5 | ~3.2s | ~1.1s（cache: filesystem） | ~0.8s |
| Rollup 4 | ~1.8s | ~1.5s（无内置缓存） | ~1.5s |
| esbuild | ~0.3s | ~0.2s | ~0.1s |
| Vite（Rolldown） | ~0.5s | ~0.1s | ~0.05s |
数据仅供参考，实际耗时因项目规模和配置复杂度而异。
打包体积对比
| 构建工具 | 产物大小 | Tree Shaking 效果 |
|---|---|---|
| Webpack 5 | 较大 | 良好 |
| Rollup 4 | 较小 | 优秀（静态分析更精确） |
| esbuild | 中等 | 良好 |
适用场景对比
| 场景 | 推荐 |
|---|---|
| 应用级项目（SPA、SSR） | Webpack / Vite |
| 库文件打包（NPM 发布） | Rollup |
| 极速开发体验 | Vite（Rolldown） |
| 已有 Webpack 项目升级 | 保留 Webpack，开启缓存 |
升级后的验证清单
升级完成后，需要逐项验证：
- 开发模式正常启动（
npm run dev） - 生产模式正常构建（
npm run build） - 所有单元测试通过（
npm test） - HMR 热更新正常工作
- Source Map 正确生成
- 代码分割（Code Splitting）按预期工作
- Tree Shaking 剔除了未使用代码
- 环境变量正确注入
参考资源
- npm-check-updates - 依赖升级工具
- Webpack 5 Migration Guide - 官方迁移指南
↑