JavaScript 格式化 / 压缩

JavaScript 格式化与压缩混淆

浏览器内运算JavaScript Formatter工具型01格式化与校验

什么是JavaScript 格式化 / 压缩

JavaScript 格式化工具按 Prettier 规则重排代码,可选单双引号风格;压缩模式使用 Terser 做语法级压缩与变量名混淆,并给出体积缩减比例。全部在浏览器本地完成,代码不会上传。

怎么用JavaScript 格式化 / 压缩

  1. 1粘贴 JavaScript 或 JSX 代码。
  2. 2格式化模式下可切换引号风格。
  3. 3压缩模式会同时做删除空白、合并表达式与变量名混淆。
  4. 4语法错误时会显示 Terser 或 Prettier 的原始报错,据此定位。

在代码里怎么实现?

一次性操作用上面的工具,重复性工作建议固化到脚本或项目里。

# 格式化:交给 Prettier,并在 CI 里校验
npx prettier --write "src/**/*.{js,jsx,ts,tsx}"
npx prettier --check "src/**/*.{js,jsx,ts,tsx}"

# 压缩:交给构建工具(esbuild / terser)而不是手工操作
npx terser input.js --compress --mangle -o output.min.js

常见问题

压缩后的代码还能还原吗?+

不能完整还原。压缩会丢弃变量名与注释,格式化只能恢复排版而不能恢复语义信息。要在生产环境定位问题,正确做法是生成并保留 source map。

为什么压缩报语法错误?+

通常是代码里含有当前解析器不支持的语法,例如未编译的 TypeScript 类型标注、装饰器或很新的提案语法。先经过编译再压缩即可。

相关工具

全部工具