解读

面试官问“差量编译”并不是想听“把 grunt-contrib-watch 打开就行”，而是考察候选人是否理解大型前端仓库在持续集成与本地开发双场景下的编译性能瓶颈，以及能否用 Grunt 的任务级缓存、文件级缓存、并行化、依赖图剪枝等手段把二次编译耗时从分钟级压到秒级。国内一线厂通常把 Grunt 与 GitLab-CI、Jenkins、Yarn Workspace、Lerna、Monorepo 结合，差量策略必须兼顾多人协作、多分支切换、构建机缓存目录与本地 node_modules 复用，否则“缓存命中率低”会直接抹平收益。回答时要给出可落地的 Gruntfile 片段与缓存失效策略，并说明如何量化验证提速效果，才能体现“资深”。

知识点

1. grunt-newer：官方推荐的文件级差量插件，通过对比 src 与 dest 的 mtime 决定跳过；缺陷是不识别跨任务依赖，对 Babel、TypeScript 等多对多转译易漏更。
2. grunt-cache-breaker：在 .cache 目录按文件内容哈希落盘，命中时直接复制，内容级缓存比 mtime 更稳；需配合 grunt-contrib-clean 做分支级失效。
3. grunt-concurrent + grunt-parallel：把 ESLint、Babel、Less、PostCSS 拆成独立子进程，利用 8~16 核构建机并行；注意输出日志乱序问题，CI 场景需加 grunt-log-headers。
4. 自定义 grunt.task.runIf：在 Gruntfile.js 里读取 git diff --name-only HEAD~1，用 minimatch 过滤出真正变化的包，动态注册子任务，实现 Monorepo 的包级差量。
5. 持久化缓存目录：在 GitLab-CI 里把 node_modules/.cache/grunt 挂在 cache:key: files: yarn.lock 下，跨 Pipeline 复用；本地开发用 grunt-contrib-copy 把缓存软链到 tmpfs，NVMe 盘可再降 30% IO。
6. 性能度量：用 time-grunt 输出每个任务冷/热缓存耗时，配合 grunt-metrics 把 JSON 上报到内部 Prometheus，命中率低于 85% 自动告警。

答案

1. 安装差量三件套

   yarn add -D grunt-newer grunt-cache-breaker time-grunt
   

2. 在 Gruntfile 顶部启用耗时打点

   require('time-grunt')(grunt);
   

3. 以 Babel 转译为例，配置内容级缓存

   grunt.initConfig({
     babel: {
       options: {
         cacheDirectory: '.cache/babel-cache', // 关键：持久化
         sourceMaps: 'inline'
       },
       modern: {
         files: [{
           expand: true,
           cwd: 'src',
           src: '**/*.js',
           dest: 'lib',
           ext: '.js'
         }]
       }
     },
     newer: {
       options: {
         override: function(detail, include) {
           // 若 Git 检出切换，强制失效
           if (process.env.CI_COMMIT_REF_NAME) {
             const sha = require('child_process')
               .execSync('git rev-parse HEAD')
               .toString().trim();
             const flag = '.cache/last-sha';
             const last = grunt.file.exists(flag) ? grunt.file.read(flag) : '';
             if (last !== sha) {
               grunt.file.write(flag, sha);
               return include(true); // 失效缓存
             }
           }
           include(false); // 走默认 mtime
         }
       }
     }
   });
   

4. 注册差量任务

   grunt.registerTask('js', ['newer:babel:modern']);
   

5. 在 CI 里加缓存 key

   cache:
     key: ${CI_COMMIT_REF_SLUG}
     paths:
       - .cache/
       - node_modules/
   

6. 本地开发用文件监听兜底

   grunt.registerTask('dev', ['js', 'watch']);
   grunt.config('watch', {
     js: {
       files: ['src/**/*.js'],
       tasks: ['js']
     }
   });
   

7. 验证：
   • 首次 grunt js 耗时 120 s，二次仅 8 s，提速 15 倍；
   • time-grunt 输出显示 babel 任务缓存命中率 96%；
   • 切换分支后命中率为 0，3 s 内自动回退到全量编译，保证正确性。

拓展思考

1. 多核并行：对 TypeScript 这种 CPU 密集型任务，可把 tsconfig.json 按业务模块拆片，用 grunt-parallel 起 8 进程同时 tsc --build，再合并 outDir，整体耗时从 180 s 降到 35 s，但需解决重复声明冲突，可用 tsc --incremental 的 .tsbuildinfo 做跨进程锁。
2. 云端缓存：把 .cache 目录上传到公司自研对象存储，CI 先下载缓存包（约 300 MB），局域网内 3 s 拉完，比“yarn install 复现”快一个量级；需用 grunt-aws-s3 加服务端签名，避免 AK/SK 泄漏。
3. 与 Vite/Webpack 混合：老项目仍用 Grunt，新模块用 Vite，差量边界落在 lib/ 目录；通过 grunt-shell 调用 vite build --ssr，再用 Grunt 做后处理压缩，实现渐进式迁移而不丢缓存收益。