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

---

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

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

---

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

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

---

🛠️ 核心工具对比

工具	特点	适用场景
UglifyJS (常用)	纯压缩，保留变量名（适合开源项目）3	基础优化、快速部署
Google Closure	高级优化（删除未用代码，重写逻辑）24	大型项目、极致性能
Babel + 插件	结合转换ES6+语法 4	现代开发栈集成

---

二、使用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 ⁴

---

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

---

Footnotes

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

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

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

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