解读

“脱水数据”在前端构建语境里通常指 构建产物（dist 目录） 或 需要打入生产包的业务数据文件（如 mock JSON、国际化语言包、地图数据等）。面试官真正关心的是：

1. 你能否在 Grunt 体系里先度量产物体积，再设阈值；
2. 超限后能否自动阻断发布并给出友好提示；
3. 在阈值内能否进一步压缩（去重、Gzip、Brotli、图片再压缩、Tree-Shaking 残余清理）。
   国内大厂现网流水线普遍要求“单包 ≤ 500 KB（Gzip 后）”，因此“限制+压缩”必须可量化、可卡点、可回滚。

知识点

• grunt-bytesize：在控制台打印每个文件 gzip 前后体积，可配置阈值报警。
• grunt-contrib-compress：支持 gzip、brotli，可自定义级别（1–11），国内 CDN 普遍同时支持两种格式。
• grunt-contrib-imagemin：基于 mozjpeg、pngquant、gifsicle，无损压缩率 20–40%，是脱水图片数据的核心插件。
• grunt-asset-inline：把小文件（<4 KB）直接 inline 成 base64，减少 HTTP 数，但会增大 JS 体积，需权衡。
• grunt-purifycss + grunt-uncss：对未使用的 CSS 规则做 Tree-Shaking，平均可再砍 30% 体积。
• grunt-fail-if-size：社区插件，可在任务链末端校验文件体积，超限即 exit 1，让 Jenkins/GitLab CI 直接红灯。
• grunt-contrib-uglify 的 compress.drop_console=true 与 mangle.properties.regex：删除线上无用日志、缩短属性名，再省 5–8%。
• Rollup/Babel 的 external 与 grunt-rollup：把第三方库 external 到 CDN，业务包瞬间瘦身 60% 以上，国内常用 bootcdn / jsdelivr。
• .grunt/grunt-size.json：自建持久化缓存，记录每次构建体积，MR 阶段做 diff，防止“体积回退”。

答案

1. 安装必备插件

   npm i -D grunt-bytesize grunt-contrib-compress grunt-contrib-imagemin grunt-fail-if-size grunt-purifycss
   

2. 在 Gruntfile.js 中先度量、再压缩、后卡点

   module.exports = function(grunt) {
     grunt.initConfig({
       // 1. 度量
       bytesize: {
         prod: {
           src: ['dist/**/*.{js,css,html,svg,png,jpg}'],
           options: {
             gzip: true,
             maxSize: 512 * 1024,          // 500 KB 红线
             warnOnly: false                // 超限直接报错
           }
         }
       },
       // 2. 图片再压缩
       imagemin: {
         dynamic: {
           files: [{
             expand: true,
             cwd: 'dist/',
             src: ['**/*.{png,jpg,gif,svg}'],
             dest: 'dist/'
           }]
         }
       },
       // 3. CSS Tree-Shaking
       purifycss: {
         target: {
           src: ['dist/**/*.js', 'dist/**/*.html'],
           css: ['dist/**/*.css'],
           dest: 'dist/css/pure.css'
         }
       },
       // 4. 生成 gzip & brotli
       compress: {
         gzip: {
           options: { mode: 'gzip', level: 6 },
           expand: true,
           cwd: 'dist/',
           src: ['**/*.{js,css,html,svg}'],
           dest: 'dist/',
           ext: '.gz'
         },
         br: {
           options: { mode: 'brotli', level: 11 },
           expand: true,
           cwd: 'dist/',
           src: ['**/*.{js,css,html,svg}'],
           dest: 'dist/',
           ext: '.br'
         }
       },
       // 5. 最终卡点
       'fail-if-size': {
         prod: {
           src: 'dist/app.bundle.js',
           maxSize: 480 * 1024   // 留 20 KB 缓冲
         }
       }
     });
   
     grunt.loadNpmTasks('grunt-bytesize');
     grunt.loadNpmTasks('grunt-contrib-imagemin');
     grunt.loadNpmTasks('grunt-purifycss');
     grunt.loadNpmTasks('grunt-contrib-compress');
     grunt.loadNpmTasks('grunt-fail-if-size');
   
     // 注册流水线
     grunt.registerTask('build', [
       'imagemin',
       'purifycss',
       'compress',
       'bytesize',
       'fail-if-size'
     ]);
   };
   

3. 在 CI 里调用

   script:
     - npm run build   # 内部跑 grunt build
     - if [ $? -ne 0 ]; then echo "体积超限，禁止合并"; exit 1; fi
   

4. 上线后监控
   把 grunt-bytesize 生成的 dist-size.json 上传到内部 OSS，接入阿里 SLS/腾讯 CLS，体积异常增长即时飞书报警。

拓展思考

• 多环境差异化阈值：测试环境 700 KB、预发 550 KB、生产 500 KB，利用 grunt.config.set('bytesize.prod.options.maxSize', envSize) 动态注入。
• Webpack 迁移场景：老项目仍用 Grunt，但新模块用 Webpack 打包，可通过 grunt-webpack 把子任务串进来，统一走 Grunt 的体积卡点，避免“双规”失控。
• 服务端渲染（SSR）补水数据：把初始 JSON 嵌入 HTML，先用 grunt-json-minify 压缩键名，再用 compress 生成 .br，可降低 40% 传输量，提升 FCP。
• 灰度回滚策略：在 fail-if-size 报错前自动 git tag 上一次体积合格版本，CI 回滚只需 30 秒，保证线上容量安全。