跳至内容
🛠️
Whiz Tools

JavaScript 压缩器 - 免费在线 JS 代码优化器

JavaScript压缩工具完全在浏览器本地运行处理，通过删除代码中的注释内容和多余的空白字符来有效减小脚本文件的体积大小，同时完整保留分号、字符串内容以及代码原有的运行逻辑不发生任何改变。该免费工具无需额外安装任何软件，适合前端开发者在部署前对脚本文件进行优化压缩。

JavaScript 压缩器

关于此工具

这是一个简单的 JavaScript 压缩器，可以删除不必要的空白和注释，以减小代码的大小。它在保持功能的同时使代码更加紧凑。

  • 删除不必要的空白（空格、制表符、换行符）
  • 删除注释（单行和多行）
  • 保留字符串字面量和正则表达式
  • 保持代码功能
加载计算器...
📚

文档

什么是 JavaScript 压缩工具？

JavaScript 压缩工具是一种缩减 JavaScript 源代码体积的工具，它会删除浏览器运行代码时用不到的字符，例如多余的空格、换行和注释。压缩之后，代码的功能完全不变，只有文件大小发生变化。

较小的 JavaScript 文件下载和加载更快，因此在网站上线之前压缩代码是常见的一步。

JavaScript 压缩的工作原理

该工具逐个字符读取代码并重新生成，丢弃读者需要但 JavaScript 引擎不需要的内容。它会删除：

  • 注释，包括// single-line单行注释和/* multi-line */多行注释，也包括 JSDoc 风格的注释。
  • 多余的空格、制表符和空行，它们只是为了让代码更易读而存在。

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

  • 字符串（"like this"、'like this'）和模板字面量（`like this`）内部的文本，即使其中含有空格或看起来像注释。
  • 正则表达式字面量，例如/[a-z]+/g。
  • 原始代码中已有的每一个分号、逗号和括号。

有时，两个词法单元之间的空格不能删除，否则会改变它们的含义。return a不能变成returna，因为那样会被读成一个单词。当删除空格会使两个词法单元粘连在一起时，该工具会保留一个空格。

换行有时也很重要。JavaScript 有时会在行尾自动插入分号，这条规则称为自动分号插入。如果删除换行可能触发或阻止这条规则，或者换行紧跟在右花括号}之后，该工具会在此处保留一个换行。这就是压缩后的代码并不总是挤在一行里的原因：有些换行会改变代码的含义，必须保留。

如何使用这个 JavaScript 压缩工具

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

处理在浏览器标签页中完成。代码绝不会发送到服务器。

示例：压缩一个函数

压缩前：

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

请注意，每个方法之前以及类的右花括号}之前都保留了换行。这些换行在原始代码中都紧跟在右花括号}之后，因此用于保护自动分号插入的规则将它们保留了下来。每个方法内部的分号也保留不变。

这个压缩工具的局限

该工具只删除注释和空白字符。与 Terser 或 UglifyJS 等构建阶段的工具不同，它不会重命名变量、删除未使用的代码或合并文件。完整的压缩可以包括删除未使用的代码，以及缩短变量名和函数名。这些工具通常能生成更小的输出，但需要构建流程才能运行。本工具在浏览器中即时运行，无需任何设置，适合快速检查或处理小段代码，而不适合完整的生产流水线。

常见问题

JavaScript 压缩工具会删除什么？

它会删除代码运行不需要的注释和空白字符。它不会删除分号、括号或代码中原有的其他任何字符。

压缩 JavaScript 会改变它的运行方式吗？

不会改变。压缩后的代码应当产生与原代码相同的结果，只有格式发生变化。

为什么压缩后的代码有时仍然有换行？

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

代码压缩（minification）和数据压缩（compression）是一回事吗？

不是。代码压缩是从源代码本身删除字符。而数据压缩，例如 gzip 或 Brotli，是为了在网络上传输而以不同方式对文件编码。网站通常同时使用两者。

我的代码会被发送到服务器吗？

不会被发送。压缩工具完全在浏览器标签页中运行，代码绝不会上传到任何地方。

压缩后的代码能还原成原来的样子吗？

空白字符可以由代码格式化工具恢复，但注释以及原来的变量名和函数名都已丢失，除非另外保存了源映射文件。

参考文献

  1. Mozilla 开发者网络（Mozilla Developer Network）。Lexical grammar: Automatic semicolon insertion。JavaScript 词法语法 — 当行终止符或}将语法不允许连在一起的词法单元隔开时，会自动插入分号。
  2. Mozilla 开发者网络（Mozilla Developer Network）。Minification。压缩术语条目 — 压缩可以删除注释、空白字符和未使用的代码，并缩短变量名和函数名。
  3. Google。Optimizing encoding and transfer size of text-based assets。web.dev：编码与传输 — 压缩（minification）严格来说不是数据压缩；gzip 和 Brotli 是适用于 JavaScript 等文本的常见压缩算法。