如何反压缩JS文件？含Webpack压缩JS文件的反压缩方法

Hey there! Let's break down how to decompress minified JavaScript files, and specifically tackle those bundled with Webpack—since they often have extra layers of obfuscation beyond just whitespace removal.

一、普通压缩JS文件的反压缩方法 #

普通的JS压缩通常只是去除空格、换行，以及简单的变量名缩短。这类文件的还原非常直接：

• 在线工具：找个靠谱的JS美化/格式化工具，把压缩后的代码粘贴进去，点击格式化按钮就能得到可读性强的代码。这类工具会自动恢复缩进、换行，让代码结构清晰。
• 本地工具（适合开发者）：
  • 用prettier：先通过npm安装npm install -g prettier，然后执行命令 prettier --write your-minified-file.js，就能直接把压缩文件格式化为规范的代码。
  • VS Code插件：安装Prettier插件后，打开压缩文件，右键选择「格式化文档」，一键完成还原。

二、Webpack打包压缩JS的反解方法 #

Webpack打包的JS不仅经过了压缩，还会做模块合并、Tree Shaking，并且用Terser这类工具做深度变量混淆（比如把autoslideSlider改成a，$改成b），甚至会有__webpack_require__这类打包标识。还原这类文件需要针对性的方法：

1. 优先利用Source Map（最便捷的方式） #

如果项目中存在对应的.map文件（比如和压缩JS同名的app.js.map），那还原会非常轻松：

• 打开Chrome开发者工具，进入「Sources」面板，找到压缩后的JS文件。
• 右键选择「Add source map」，导入对应的.map文件，就能直接看到原始的未压缩代码，包括原始的变量名、函数名和文件结构。

2. 无Source Map时的反混淆工具 #

如果没有Source Map，就需要用专门的反混淆工具来处理：

• 在线工具：推荐使用de4js，它专门针对各类混淆后的JS（包括Webpack打包的）。粘贴压缩代码后，它会自动识别Webpack的模块结构，尝试把短变量名替换为更有意义的名称，还原函数和模块的逻辑结构。
• 本地工具（进阶）：
  • 可以用js-beautify先格式化代码，再结合@babel/parser解析AST（抽象语法树），手动编写脚本遍历AST，把无意义的短变量名替换为更贴合逻辑的名字。不过这个需要一定的JS语法和AST知识。

三、针对你提供的代码片段的还原示例 #

你给出的原始代码片段是：

function autoslideSlider() { $('.next-slide').trigger('click'); } 
$(window).on('load', function(){ 
  $('.preloader').fadeOut('fast'); 
  $('#after_load').addClass('show'); 
  setInterval(autoslideSlider, 8000); 
}); 
$('a').on('click', function () { 
  if (location.pathname.replace(/^\/+/, '') === this.pathname.replace(/^\/+/, '') && location.hostname === this.hostname) { 
    var $target = $(this.hash); 
    $target = $target.length &&a...

如果经过Webpack压缩后，这段代码可能会变成类似这样的混淆形式：

function a(){b(".next-slide").trigger("click")}b(window).on("load",function(){b(".preloader").fadeOut("fast"),b("#after_load").addClass("show"),setInterval(a,8e3)}),b("a").on("click",function(){if(location.pathname.replace(/^\/+/,"")===this.pathname.replace(/^\/+/,"")&&location.hostname===this.hostname){var c=b(this.hash);c=c.length&&...

通过反混淆工具处理后，会把a还原为autoslideSlider，b还原为$，恢复缩进和换行，最终得到和原始代码逻辑一致、可读性强的版本。

注意事项 #

• 反压缩/反混淆后的代码可能和原始代码不完全一致（比如变量名可能无法完全还原成原始名称），但核心逻辑是完全相同的。
• 如果代码经过了更复杂的混淆（比如控制流平坦化、字符串加密），还原难度会大幅提升，可能需要手动分析AST或者使用更专业的逆向工具。

内容的提问来源于stack exchange，提问作者Adarsha Beleyur