Electron应用使用UglifyJS压缩main.js后ready事件触发两次的问题

嘿，我看你碰到了Electron主进程代码用UglifyJS压缩后，ready相关逻辑触发两次的诡异问题，原始代码正常、压缩后出bug的情况确实挺闹心的，我来帮你捋捋可能的原因和对应的解决思路：

一、先排查压缩工具的兼容性问题 #

UglifyJS对ES模块（也就是你代码里用的import/export语法）的支持其实不算特别完善，它的--module参数在处理现代JS特性时偶尔会出现逻辑扭曲的情况。而你碰到的回调触发两次，大概率是压缩过程中事件绑定逻辑被错误地重复了。

解决办法：换用Terser替代UglifyJS #

Terser是UglifyJS的后继项目，对ES模块和现代JS语法的支持更好，很多Electron项目现在都用它来压缩代码。你可以把压缩命令换成：

npx terser src/electron/main.js -o src/electron/main.min.js --compress drop_console=true,passes=3 --mangle --module

先试试这个，看问题是否消失——我之前碰到过类似的UglifyJS压缩ES模块的bug，换Terser直接就解决了。

二、排查全局变量混淆导致的逻辑错误 #

你代码里用了global.win和global.app来挂全局变量，UglifyJS的--mangle（混淆）选项有可能会把这些全局变量的名字错误重命名，导致Electron的全局对象处理逻辑异常，间接引发事件回调重复绑定。

解决办法： #

1. 减少对global的依赖：把全局变量改成模块内的局部变量，既更安全也避免混淆问题。比如：

   // 替换原来的 global.win = null; global.app = app;
   let win = null;
   // 删掉global.app = app; 直接用import进来的app对象就行，Electron的app本身就是单例
   

   然后把所有用到global.win的地方换成win，比如windowExist函数：

   function windowExist() {
       !win ? win = createWindow() : win.show();
   }
   

2. 如果必须用全局变量，禁止混淆它们：在UglifyJS命令里加上保留关键变量的参数：

   uglifyjs src/electron/main.js -o src/electron/main.min.js --compress drop_console=true,passes=3 --mangle reserved='win,app' --module
   

   这样UglifyJS就不会混淆win和app这两个变量名了。

三、排查压缩过程中的逻辑重复 #

如果上面的方法都没用，那得直接看压缩后的代码，定位是不是事件回调被重复绑定了：

调试步骤： #

1. 先关闭混淆，只做代码压缩，看看问题是否存在：

   uglifyjs src/electron/main.js -o src/electron/main.min.js --compress drop_console=true,passes=3 --no-mangle --module
   

   • 如果问题消失：说明是混淆步骤导致的，回到上面的全局变量处理方案。
   • 如果问题还在：说明是压缩（compress）步骤的问题，试试减少passes的次数（比如改成passes=1），多次压缩迭代有时候会把代码逻辑拧乱。

2. 打开压缩后的main.min.js，搜索app.whenReady或者app.on('ready')，看看是不是出现了两次——如果是的话，那就是UglifyJS在处理你的顶级代码时，错误地重复了事件绑定逻辑，这种情况建议直接换Terser。

四、额外的代码优化建议 #

你代码里的global.app = app;其实完全没必要，Electron的app对象本身就是单例，直接用import进来的app就行，删掉这行代码还能减少潜在的冲突点。

另外，你提到换成app.once('ready')也有同样问题，这说明不是whenReady和once('ready')的API差异，而是回调被绑定了两次，或者模块初始化逻辑被执行了两次，上面的方案应该能覆盖这些情况。

备注：内容来源于stack exchange，提问作者benz