红宝书第三十七讲：代码压缩与混淆入门指南

红宝书第三十七讲：代码压缩与混淆入门指南

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、为什么要压缩/混淆代码？

• 压缩：将代码体积减少 30%-70%（比如把“行李箱里的衣物抽真空”），加快下载速度 ^[1]
• 混淆：让代码难以阅读（像“加密的日记本”），保护知识产权^[2]

🛠️ 核心工具对比

二、使用UglifyJS的三步操作

1. 安装工具：

   # 安装最新版 (需Node.js环境💡)
   npm install uglify-js -g
   

2. 原代码示例（原始文件 main.js）：

   // 用户年龄计算
   function calculateAge(birthYear) {
     const currentYear = new Date().getFullYear();
     return currentYear - birthYear;
   }
   console.log("你的年龄是：" + calculateAge(1990));
   

3. 命令行压缩：

   # 📦 基本压缩
   uglifyjs main.js -o main.min.js -c -m
   
   # 🔥 极端优化（破坏变量名）
   uglifyjs main.js -o main.obfuscated.js -c -m --mangle-props
   

压缩后效果：

function n(t){return(new Date).getFullYear()-t}console.log("你的年龄是："+n(1990)); // [^1]

注：变量名缩短（如calculateAge→n）、空格删除，但逻辑不变！

三、Google Closure Compiler 高级模式

1. 基础用法：

   java -jar closure-compiler.jar --js main.js --js_output_file main.closure.js
   

2. 优化示例（可能改写逻辑）：
   原始代码：

   let a = 5;
   function add(x) { return x + 10; }
   console.log(add(a));
   

   编译后：

   console.log(15); // ⚡直接算出结果，删除多余函数！[^3]
   

四、实战流程图

flowchart TD
    A[原始代码.js] --> B{选择工具}
    B -->|轻量级| C[UglifyJS]
    B -->|高度优化| D[Closure Compiler]
    C --> E[压缩/重命名变量]
    D --> F[删除未用代码+逻辑优化]
    E --> G[输出.min.js]
    F --> G

补充说明

• 何时用混淆？：商用项目需保护核心逻辑时可结合专用工具（如JavaScript Obfuscator）
• 风险提示：过度压缩可能破坏代码可调试性，生产环境需结合SourceMap ^[4]

目录：总目录
上篇文章：红宝书第三十六讲：持续集成（CI）配置入门指南

1. 《JavaScript高级程序设计（第5版）》提及压缩与混淆的区别定义及Web应用场景说明 ^[1][^5] ↩ ↩

2. 《JavaScript高级程序设计（第5版）》提及Google Closure Compiler的代码优化与编译逻辑 ^[2][4] ↩ ↩ ↩

3. 《JavaScript高级程序设计（第5版）》提及UglifyJS用于基础压缩与美化的官方文档参考内容 ^[3] ↩ ↩

4. 《JavaScript高级程序设计（第5版）》提及构建工具链中压缩工具的选择及配套使用建议 ^[4] ↩ ↩ ↩ ↩ ↩