JavaScript 压缩器

Q: 为什么压缩后的代码有时仍然包含换行符？

换行符可能是 JavaScript 自动分号插入规则所要求的，也可能位于闭合大括号 } 之后。删除它可能改变代码的行为，因此工具会在这些位置保留一个换行符，而不是将其删除。

什么是 JavaScript 压缩器？

JavaScript 压缩器是一种通过删除浏览器运行代码时不需要的字符来缩小 JavaScript 源代码的工具，例如多余的空格、换行符和注释。压缩后的代码执行结果完全相同，只有文件大小会发生变化。

更小的 JavaScript 文件下载和加载速度更快，因此在网站上线前进行压缩是常见步骤。

JavaScript 压缩的工作原理

此工具逐个字符读取代码并重新构建，删除读者需要但 JavaScript 引擎不需要的内容。它会删除：

注释，包括 // single-line 单行注释和 /* multi-line */ 多行注释，以及 JSDoc 风格的注释。
仅用于提高代码可读性的多余空格、制表符和空行。

除此之外，它不会添加或删除任何内容。它绝不会删除代码中原本已有的分号、括号或其他字符，也不会插入新的标点符号。以下内容也会保持不变：

字符串（"like this"、'like this'）和模板字面量（`like this`）中的文本，即使其中包含空格或看起来像注释。
正则表达式字面量，例如 /[a-z]+/g，以及它们的所有标志：d、g、i、m、s、u、v 和 y。
原始代码中已有的每个分号、逗号和括号。

有时，两个标记之间的空格无法删除，否则会改变含义。return a 不能变成 returna，因为后者会被当作一个单词读取。使用英语字母表以外的字母书写的名称也是如此，因此 typeof π 会保留空格。如果删除空格会使两个标记连接在一起，工具就会保留一个空格。

换行符也可能影响代码含义。JavaScript 有时会在行尾自动插入分号，这项规则称为自动分号插入（Automatic Semicolon Insertion）。如果删除换行符可能触发或阻止该规则，或者换行符位于闭合大括号 } 之后，工具就会在那里保留一个换行符。因此，压缩后的代码不一定会被压缩到同一行：某些换行符会改变代码含义，必须保留。

如何使用 JavaScript 压缩器

将 JavaScript 代码粘贴到输入框中。
选择“压缩”。
在输出框中查看结果，以及原始大小、压缩后大小和缩减百分比。
选择“复制”以复制压缩后的代码。

压缩过程在浏览器标签页内运行，代码不会上传到任何地方进行处理。此工具还会将粘贴的代码复制到页面地址中，因此可以轻松收藏或分享结果。任何能够看到该地址的人都可以看到其中的代码。

示例：压缩函数

压缩前：

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

压缩后：

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

三个注释都会消失，缩进也会被删除。a+b 后面的分号会保留，因为工具绝不会删除代码中原本已有的分号。const 前的换行也会保留，因为它位于闭合大括号 } 之后。

示例：压缩类

压缩前：

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

压缩后：

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

请注意，每个方法之前以及类的闭合 } 之前都会保留换行符。这些换行符在原始代码中都位于闭合 } 之后，因此保护自动分号插入的规则会保留它们。每个方法内部的分号也会保留。

大小缩减公式

工具会在输出框下方报告三个数字：原始大小、压缩后大小和缩减量。所有大小都是字符数，而不是字节数。缩减量是一个百分比，四舍五入到最接近的整数：

1reduction = round((1 - minified characters / original characters) x 100)
2

上面的函数示例在压缩前有 213 个字符，压缩后有 103 个字符。因此 1 - 103 / 213 = 0.5164，即 51.64%，工具会显示 52%。类示例从 515 个字符减少到 304 个字符，缩减率为 40.97%，显示为 41%。

此压缩器的限制

此工具只会删除注释和空白。与 Terser 或 UglifyJS 等构建步骤工具不同，它不会重命名变量、删除未使用的代码或合并文件。这些工具通常可以生成更小的输出，但需要运行构建流程。此工具无需设置即可在浏览器中立即运行，更适合快速检查或小型代码片段，而不是完整的生产构建流程。

常见问题