开发者工具 · JSON / 数据格式

JS 压缩

Terser 浏览器版/简易混淆

✓本地处理 · 不上传 ✓免费 · 无需登录 ✓无次数限制 累计 111 次使用
输 入 JS
压缩结果 min.js
压缩结果将在这里呈现 —— 点「示例」试试
就绪 · 粘贴 JS 实时压缩,Terser 删死代码 / 混淆变量 / 删 console,全程本地处理
第一节

关于本工具

About

部署前端项目前,把 JS 文件过一遍 Terser,能砍掉 30%-60% 的体积,但命令行配置和 AST 报错劝退了不少人。这个页面把 Terser 的压缩与简易混淆逻辑搬进浏览器——粘贴代码,选好压缩级别和是否保留注释,点一下就能看到体积变化和压缩后的内容。所有处理都在本地完成,代码不会离开电脑,适合在 CI 流程之外快速验证压缩效果或临时处理单文件。

使用场景

壹

小程序分包瘦身

微信小程序主包限 2MB,上线前发现工具库和冗余注释占了 400KB。用本工具把 lodash 按需调用后的代码做死代码消除与变量名缩短,主包体积降至 1.6MB,成功过审。Terser 的 `compress.drop_console` 选项还顺带清理了调试日志,避免生产环境暴露内部路径。

贰

第三方库源码保护

外包项目交付时,客户要求前端 JS 代码不可被直接阅读。用本工具的简易混淆功能(变量名替换、字符串数组化)处理了 3 个核心模块,使源码从可读的 `getUserInfo` 变为 `a.b` 形式。虽然达不到商业混淆强度,但已阻止普通开发者在浏览器控制台直接复制逻辑。

叁

老旧项目兼容 ES5

维护一个 2017 年的 Vue 2 项目,用户群体仍用 IE 11 浏览器。新版 Babel 配置复杂,直接用本工具把 ES6 箭头函数、`const` 声明转成 ES5 兼容写法,同时压缩 30%。浏览器端完成处理,无需搭建 Node 构建环境,5 分钟完成一个页面的降级。

肆

CDN 加载脚本优化

一个统计 SDK 脚本 120KB,部署在境外 CDN 上,用户首屏加载需 1.8 秒。用本工具压缩后降至 48KB,变量名从 `_trackPageview` 缩短为 `_tp`,同时开启 `toplevel: true` 删除未暴露的全局函数。加载时间降至 0.6 秒,且未改动对外接口名,埋点代码无需修改。

伍

H5 游戏资源包精简

一个微信小游戏主逻辑 JS 文件 800KB,分包加载超时。用本工具做死代码消除(`dead_code: true`),删掉未调用的排行榜和分享功能代码;同时将长字符串(如弹幕文本)用 `evaluate: false` 保持原样,避免误改。最终文件 510KB,加载失败率从 12% 降至 3%。

第二节

使用指南

Getting Started

使用步骤

  1. 1在左侧代码编辑区粘贴或输入 JavaScript 代码,右侧实时显示压缩后的结果与体积变化
  2. 2点击「选项」展开压缩配置,勾选「移除 console」或「压缩变量名」等开关,右侧结果即时更新
  3. 3点「复制结果」按钮将压缩代码存入剪贴板,或点「下载」保存为 .min.js 文件
  4. 4切换「原始代码」与「压缩代码」标签对比差异,确认无语法错误后使用

输入输出示例

输入输出说明
function hello(name) { console.log('Hello, ' + name); } hello('World');function hello(name){console.log("Hello, "+name)}hello("World");常规:基础函数压缩,验证空格、引号、分号精简,Terser 默认行为
const a = [1, 2, 3, 4, 5]; const b = a.map(x => x * 2); console.log(b);const a=[1,2,3,4,5],b=a.map(x=>x*2);console.log(b);常规:箭头函数与数组方法,验证 const 合并与箭头函数保留
// 这是一行注释 /* 多行注释 */ var x = 10; // 行末注释var x=10;边界:注释全部移除,验证 Terser 默认会删除所有注释(保留特定注释需配置)
function test() { return; }function test(){}边界:空 return 语句被移除,验证 Terser 对无意义语句的优化
function longName(param1, param2) { return param1 + param2; } longName(3, 4);function longName(n,t){return n+t}longName(3,4);常规:参数名被缩短(mangle),验证默认变量名混淆行为
var x = 1; var x = 2; console.log(x);var x=1,x=2;console.log(x);易错:重复声明 var 被合并但值保留,验证 Terser 不报错仅合并
eval('var y = 10;'); console.log(y);eval("var y=10;");console.log(y);易错:eval 内的代码不会被压缩或混淆,验证 Terser 对动态代码的保守处理

常见错误对照

1.未开启压缩选项,输出与输入相同

✗ 错误直接点击压缩,未勾选任何选项
✓ 修复勾选「压缩」或「混淆」选项后再点击压缩

Terser 默认只做语法树解析,不进行压缩或混淆,需要显式启用对应选项才生效。

2.使用 ES6+ 语法但未指定目标版本,导致兼容问题

✗ 错误输入 const fn = () => {} 后压缩,输出仍含箭头函数
✓ 修复在「目标版本」中选 ES5,或手动添加 `--target es5`

Terser 默认保留现代语法,不自动降级。要兼容旧浏览器需指定目标版本,否则压缩后仍含箭头函数等。

3.混淆后变量名仍可读,误以为混淆失败

✗ 错误输入 function calculateTotal() { let price = 10; } 混淆后输出 function calculateTotal() { let price = 10; }
✓ 修复开启「混淆」选项并确保「保留函数名」未勾选

Terser 的混淆默认保留顶层函数名和全局变量名,需额外配置 `--mangle` 参数或勾选对应选项才重命名。

4.压缩后代码报错,因未处理严格模式冲突

✗ 错误输入 'use strict'; function a() { eval('var x=1'); } 压缩后报错
✓ 修复压缩前关闭严格模式或改用非严格模式代码

Terser 在压缩时可能移除 'use strict' 声明,导致原本依赖严格模式的代码在非严格模式下运行出错。

5.使用 eval 或 with 时未关闭压缩,导致运行时错误

✗ 错误输入 eval('var a=1'); 压缩后输出 eval('var a=1') 但变量 a 未定义
✓ 修复压缩前勾选「保留 eval」或「保留 with」选项

Terser 默认会重命名局部变量,但 eval 和 with 内的字符串无法静态分析,变量名被重写后字符串内仍引用原名导致 undefined。

6.压缩后代码体积反而变大,因未移除注释和空格

✗ 错误输入带大量注释和空格的代码,压缩后体积未减
✓ 修复勾选「移除注释」「压缩空格」等选项

Terser 默认保留注释和部分空格,需显式启用 `--comments false` 和 `--compress` 才能彻底移除。

第三节

工作原理

How It Works

核心公式

压缩率 = (压缩后大小 ÷ 原始大小) × 100%

变量说明

  • 压缩后大小Terser 处理后 JS 文件字节数
  • 原始大小压缩前 JS 文件字节数

示例

原始 JS 文件 120 KB,Terser 压缩后 78 KB:压缩率 = (78 ÷ 120) × 100% = 65%,文件减少 35%。

原始 JS 代码 (含注释/空格/长变量名) 词法分析 → 拆解为 Token → 构建 AST (抽象语法树) Terser 压缩 → 删除注释/空格 → 缩短变量名 → 常量折叠/死代码移除 压缩后 JS (体积减少 30%-60%) 所有处理在浏览器本地完成,代码不上传服务器 用户输入 本地处理 输出结果 隐私说明
用户输入 本地处理 输出结果 隐私说明
第五节

常见问题

Q & A
问这个压缩工具支持 ES6 语法吗?+
答

支持。本工具基于 Terser 实现,Terser 本身就是为 ES6+ 语法设计的压缩器,能处理箭头函数、async/await、模板字符串等。如果代码里用了 ES6 但压缩后报错,先确认浏览器版本是否支持输出的 ES6 语法,或者检查代码里是否有 Terser 无法识别的非标准语法(如 TypeScript 类型标注、装饰器)。建议压缩前先用 Babel 转译一次。

问压缩后代码不能运行了,哪里出了问题?+
答

最常见原因是 Terser 的压缩选项过于激进。本工具默认开启了变量名缩短、空格移除、注释删除等优化,但不会自动保留某些全局变量或特定函数名。如果代码里有用 eval、new Function 动态执行字符串,或引用了 window['xxx'] 这类字符串引用变量名,压缩后这些引用会失效。解决办法:压缩前把动态引用的变量名用对象属性写死,或本工具结果区勾选 '保留函数名' 选项后再试。

问这个工具和 UglifyJS 压缩有什么区别?+
答

UglifyJS 只能处理 ES5,遇到 ES6 语法(如 const、箭头函数)会直接报错或输出错误代码。本工具用 Terser(UglifyJS 的 ES6+ 分支),原生支持 ES6+ 语法,压缩率通常比 UglifyJS 高 5-10%,且不依赖 Babel 预转译。如果项目代码全是 ES5,两者压缩效果差别不大,但 Terser 的压缩算法更现代,输出体积略小。

问代码里有中文注释,压缩后会不会乱码?+
答

不会乱码。Terser 默认删除所有注释(包括中文注释),所以中文注释会被直接移除,不会出现在输出中。如果勾选了 '保留注释' 选项,Terser 会原样保留注释内容,中文不会变成乱码。如果压缩后看到乱码,通常是源文件编码不是 UTF-8,建议用 UTF-8 重新保存源文件后再压缩。本工具输入输出都是 UTF-8 编码。

问压缩后变量名变成 a、b、c,怎么保留原来的变量名?+
答

本工具默认开启变量名缩短(mangle),把长变量名替换为单个字母以减小体积。如果希望保留原始变量名(例如暴露给外部调用的全局函数或 API 接口),可以在结果区勾选 '不缩短变量名' 选项。如果只保留特定变量名,在 '保留变量名' 输入框中用逗号列出,例如 'myGlobal,myFunc',Terser 会跳过这些名字的缩短。

问文件超过多少 KB 就不能压缩了?+
答

本工具是浏览器端运行,没有固定大小限制,但受浏览器内存上限影响。实测 5MB 以内的 JS 文件可以流畅压缩,超过 10MB 可能出现卡顿或浏览器提示 '页面无响应'。如果处理大文件,建议先拆分为多个模块分别压缩,或者用 Node.js 版本的 Terser 在本地命令行处理。本工具不会上传文件到服务器,所有处理都在浏览器内完成。

问压缩后体积反而变大了,为什么?+
答

极少数情况确实会变大。常见原因:源文件已经过压缩(如已用 UglifyJS 或 Terser 处理过),再次压缩时 Terser 为了保持兼容性会加一些保护代码,导致体积略微增加(通常 < 5%)。另一种情况是源文件很小(< 1KB),压缩后变量名缩短节省的空间被代码格式化开销抵消。如果遇到体积变大,建议对比原始文件和压缩结果,检查是否误勾选了 '保留所有注释' 或 '美化输出' 选项。

问这个工具能混淆代码防止别人看吗?+
答

本工具提供的是简易混淆,包括变量名缩短、字符串提取、死代码删除等,能让代码可读性大幅下降,但无法做到真正的防逆向。Terser 的混淆属于 '压缩级混淆',不包含控制流平坦化、字符串加密等高级混淆手段。如果只是防小白复制粘贴,本工具够用;如果代码涉及核心算法或授权校验,建议配合专门的 JavaScript 混淆器(如 Jscrambler、Jsfuck)使用。

隐私保证所有计算与处理均在你的浏览器本地完成,输入数据不会上传服务器,也不会保存或共享。

↑↓选择 ↵打开 ⌘+↵新窗口 esc关闭