解读

面试官真正想考察的是：

1. 你是否理解“构建产物体积”对线上性能与部署成功率的影响；
2. 能否在 Grunt 体系里主动植入体积监控逻辑，而不是被动等运维报警；
3. 当体积超标时，立即阻断后续任务（如合并、上传、部署），把风险左移到构建阶段；
4. 方案要可维护、可复用、可插拔，符合国内团队“小步快跑”的迭代节奏。

知识点

1. Grunt 任务链（task chain）与中断机制：grunt.fail.warn() 或 grunt.fail.fatal() 可强制终止后续任务。
2. 文件系统同步读取：grunt.file.read() 返回 Buffer/String，可精准拿到产物体积。
3. 阈值配置化：把体积上限写在 Gruntfile.js 或独立 config/budget.json，方便不同环境（dev、staging、prod）差异化管理。
4. 自定义多任务（multi-task）：通过 grunt.registerMultiTask() 封装“体积守卫”逻辑，供所有项目一键复用。
5. 国内网络与 CDN 现状：包体积每增加 100 KB，在弱网（2G/3G）下白屏时间可能增加 1 s 以上，因此体积守卫必须默认开启、不可被业务注释掉。

答案

1. 安装基础依赖（无额外插件，保持轻量）：
   npm i -D grunt

2. 在 Gruntfile.js 顶部定义体积预算：
   const SIZE_BUDGET = {
   'dist/app.js': 200 * 1024, // 200 KB
   'dist/vendor.js': 500 * 1024 // 500 KB
   };

3. 注册自定义任务 size-guard：
   grunt.registerTask('size-guard', function() {
   const done = this.async();
   let pass = true;
   Object.keys(SIZE_BUDGET).forEach(asset => {
   if (!grunt.file.exists(asset)) {
   grunt.log.warn(❌ ${asset} 不存在);
   pass = false;
   return;
   }
   const size = grunt.file.read(asset).length;
   const max = SIZE_BUDGET[asset];
   if (size > max) {
   grunt.log.error(❌ ${asset} 体积 ${(size/1024).toFixed(2)} KB，超出阈值 ${max/1024} KB);
   pass = false;
   } else {
   grunt.log.ok(✅ ${asset} 体积 ${(size/1024).toFixed(2)} KB，未超标);
   }
   });
   if (!pass) {
   grunt.fail.fatal('体积守卫未通过，已阻断合并与后续任务！');
   }
   done();
   });

4. 在任务链中把体积守卫插在合并之后、上传之前，确保“先产出、再检查、再决定要不要继续”：
   grunt.registerTask('build', [
   'clean:dist',
   'webpack:prod', // 先完成打包
   'concat:js', // 合并
   'size-guard', // 体积守卫：超标即中断
   'uglify', // 只有体积通过才压缩
   'upload:cdn' // 只有体积通过才上传
   ]);

5. 在 CI（如 GitLab-CI、Jenkins、GitHub Actions 国内镜像节点）里执行：
   npm run build // 等价于 grunt build
   一旦超标，非零 exit code 会直接阻断 MR 合并，无需人工 review。

拓展思考

1. 动态预算：把 SIZE_BUDGET 放到 package.json 的 gruntConfig.budget 字段，CI 阶段可通过环境变量 MAX_VENDOR=600kb 动态注入，实现“分支维度”的体积策略。
2. 增量对比：在 size-guard 里先读取 git merge-base 对应旧产物体积，若本次 MR 涨幅 > 10 % 直接阻断，防止“渐进式膨胀”。
3. 可视化报表：把体积数据写入 dist/size-report.json，再推到内部仪表盘（如阿里 Sentry 自研版），周会复盘“谁引入了超大依赖”。
4. 与 webpack-budget 共存：若团队正向 webpack 迁移，可在同一 Gruntfile 里用 grunt-webpack 打包，再用上述 size-guard 做二次校验，实现“双构建双保险”。
5. 灰度容错：对遗留项目首次接入时，加 grunt.option('--force') 可临时跳过守卫，但 CI 中默认不带 --force，确保新代码必须瘦身才能上线。