解释在 grunt 中实现任务级别性能预算的方法 - 问题详情 - 创脉思

解读

面试官真正想考察的是：

你是否理解“性能预算”在前端工程化中的含义——把可量化的性能指标（文件体积、请求数、CPU 耗时等）固化为红线，一旦构建结果触碰红线即判定失败，从而阻止劣化代码进入生产。
你是否能把这条红线下沉到单个 Grunt 任务粒度，而不是只在 CI 末端做整体校验。
你是否熟悉 Grunt 的任务生命周期钩子、多任务机制以及异步结果回传方式，能把预算逻辑做成可复用、可插拔的“任务内”或“任务后”校验。

知识点

Grunt 任务生命周期：registerMultiTask → this.options() → this.files → this.async()。
性能预算指标：
- 资源体积（gzip 后 / 未 gzip）
- 请求数（合并后文件个数）
- 任务自身耗时（Grunt.util.spawn 计时）
预算存储方式：
- 直接写在 Gruntfile 的 task options 里（适合小团队）
- 单独 .budgetrc.json 由 grunt.file.readJSON 载入（适合多项目复用）
预算校验触发点：
- 任务内联：在任务末尾立即计算并 grunt.fail.warn()。
- 任务后钩子：使用 grunt.event.on('watch'/'exit') 或 grunt.task.run(['budget']) 显式插入。
失败策略：
- warn 级别：不阻塞后续任务，仅标红提示。
- fatal 级别：grunt.fail.fatal() 直接退出进程，CI 流水线即判定失败。
官方与社区插件：
- grunt-size-report（体积）
- grunt-timer（耗时）
- grunt-perfbudget（基于 WebPageTest API，可做网络指标）
  但面试官更希望听到“不依赖现成插件，自己用 30 行代码写一个 budget 任务”的落地思路，以体现你对 Grunt 机制的掌控力。

答案

给出一个可直接落地的“任务级别”体积预算方案，分为三步：预算声明 → 任务内收集 → 任务后校验。

第一步：在 Gruntfile 中声明预算

grunt.initConfig({
  uglify: {
    build: {
      options: {
        // 1. 把预算直接挂在任务 options 里，后续可 this.options().budget 读取
        budget: { maxBytes: 102400 }   // 100 KB
      },
      files: { 'dist/app.min.js': 'src/**/*.js' }
    }
  }
});

第二步：写一个通用 budget 校验器，注册为独立任务

grunt.registerMultiTask('budget', '任务级性能预算校验', function() {
  var budget = this.options().budget;
  var done = this.async();
  var total = 0;

  this.files.forEach(function(f) {
    f.src.filter(function(filepath) {
      if (!grunt.file.exists(filepath)) return false;
      total += grunt.file.read(filepath).length;
    });
  });

  if (total > budget.maxBytes) {
    grunt.fail.fatal(
      '**任务 ' + this.target + ' 超出体积预算！** 实际 ' + total +
      ' 字节，预算 ' + budget.maxBytes + ' 字节'
    );
  } else {
    grunt.log.ok('✔ 任务 ' + this.target + ' 体积预算通过');
  }
  done();
});

第三步：在 uglify 任务后自动插入校验

grunt.registerTask('default', [
  'uglify',
  'budget:uglify'   // 关键：把预算任务挂在原任务后面，实现“任务级别”拦截
]);

运行 grunt 后，一旦 app.min.js 超过 100 KB，构建立即 fatal 退出，CI 日志会高亮显示 “任务 uglify 超出体积预算！”，实现真正的“任务级”性能门禁。

拓展思考

多指标并行：把预算对象扩展为 { maxBytes: 102400, maxGzipBytes: 35000, maxRequests: 6, maxTaskTime: 3000 }，在 budget 任务里同步计算 gzip 体积与耗时，一次运行给出多维报告。
差异化预算：利用 grunt.util._.merge 把全局预算与分支预算合并，实现“核心包 80 KB、业务包 120 KB”的细粒度管控。
增量校验：结合 grunt-newer 仅对变更文件做预算，大型 monorepo 可节省 70% 校验时间。
可视化回归：把每次构建的体积、耗时写入 dist/.budget-history.json，再写一个简单的 grunt budget-diff 任务，在 MR 阶段自动评论“体积增加 +2.3 KB”，让预算透明化。
与 Jenkins/GitLab CI 集成：在 package.json 的 scripts 里加 "build": "grunt"，CI 阶段只要 `echo $?' 非 0 就阻断合并，把性能预算变成代码门禁，实现“不通过预算，不进主干”的国内主流质量门禁要求。