使用Uglify压缩后window.onload失效问题求助

现象描述 #

未压缩脚本时，window.onload可以正常执行；但经过Uglify-js压缩后，window.onload完全失效，没有任何输出。而使用jQuery(document).ready的代码压缩后却能正常运行。

测试代码 #

未压缩的window.onload代码（压缩后无法运行）：

window.onload = function() { 
 // My code 
 console.log( "HELLO TO YOU" );
};

未压缩的jQuery(document).ready代码（压缩后可正常运行）：

jQuery(document).ready(function() {
   // My code
 console.log( "HELLO TO YOU" );
});

压缩后的代码输出 #

window.onload = function() {
    let e = document.querySelector("#main-header")
      , t = e.offsetHeight
      , o = document.querySelector("#et-main-area")
      , n = document.querySelector("#wpadminbar");
    o.style.marginTop = t + "px",
    e.style.top = n ? n.offsetHeight + "px" : "0px"
}
,
jQuery(document).ready((function() {
    let e = document.querySelector("#main-header")
      , t = e.offsetHeight
      , o = document.querySelector("#et-main-area")
      , n = document.querySelector("#wpadminbar");
    o.style.marginTop = t + "px",
    e.style.top = n ? n.offsetHeight + "px" : "0px",
    console.log("HELLO")
}

解决思路 #

• 修复压缩后代码的语法错误：观察你提供的压缩后代码，jQuery(document).ready的回调函数末尾缺少闭合括号和分号，正确写法应该是}));。这种语法错误会导致整个脚本解析失败，进而让前面的window.onload也无法执行。建议检查Uglify-js的压缩配置，确保输出完整合法的JavaScript代码。
• 单独测试极简压缩案例：把最基础的window.onload代码单独拿去压缩，比如：

  window.onload = function(){console.log("test")};
  

  如果这个压缩后能正常运行，说明问题出在原代码的其他部分或者压缩时的脚本合并逻辑。
• 更换window.onload的绑定方式：避免直接赋值，改用事件监听的方式：

  window.addEventListener('load', function() {
    // 你的代码
    console.log("HELLO TO YOU");
  });
  

  这种方式不会被其他脚本覆盖，兼容性更好，也可能避开Uglify-js的压缩异常。
• 检查Uglify-js版本与配置：老版本的Uglify-js对ES6语法（比如let）支持不佳，可能导致压缩出错。尝试升级到最新版本，或者在压缩前将ES6代码转译为ES5。同时确认是否开启了drop_console等可能影响输出的配置（不过你的jQuery代码里console.log能输出，这个可能性较低）。
• 增加DOM元素存在性判断：压缩后的window.onload代码中，若#main-header等DOM元素不存在，document.querySelector会返回null，调用offsetHeight会抛出错误，导致整个函数中断。可以在代码开头增加判断：

  window.onload = function() {
    let e = document.querySelector("#main-header");
    if (!e) return; // 元素不存在则直接退出
    let t = e.offsetHeight,
        o = document.querySelector("#et-main-area"),
        n = document.querySelector("#wpadminbar");
    o.style.marginTop = t + "px",
    e.style.top = n ? n.offsetHeight + "px" : "0px"
  };
  

内容的提问来源于stack exchange，提问作者Marc DG