使用 UglifyJS 处理嵌套类和变量

Question

我使用 UglifyJS 来缩小一组连接的文件，效果很好，但还不够好。构建的库使用命名空间，因此类、函数和常量存储在根命名空间变量中：

(function() {
  var root = { api:{}, core:{}, names:{} };

  /* util.js file */
  root.names.SOME_LONG_NAMED_CONST='Angel';

  /* Person.js file */
  root.core.Person = function(name) { this.name = name };

  /* API.js with the functions we want to expose */
  root.api.perform = function(param_for_api) { /* do something */ }

  window.lib_name.perform = root.api.perform;

})();

缩小到不那么最小的版本

(function(){var a={api:{},core:{},names:{}};a.names.SOME_LONG_NAMED_CONST="Angel",a.core.Person=function(a){this.name=a},a.api.perform=function(){},window.lib_name.perform=a.api.perform})();

我理解 uglify 可能认为 root var 是一种必须保持原样且不能更改的数据结构。有没有办法让 UglifyJS 破坏根命名空间中的嵌套名称？

Answer 1

我一直在尝试使用 UglifyJS2 的 --mangle-props 并且可以告诉你：'它弄得一团糟'。

正如有人指出的那样：'开发人员应该决定要破坏哪些属性，而不是 uglifyjs'

我正在使用这个选项来解决这个问题：

--mangle-props
--mangle-regexp="/_$/"

正则表达式匹配任何末尾带有下划线的属性。

您要求破坏根命名空间中的嵌套名称。所以，你的代码：

(function() {
  var root = { api:{}, core:{}, names:{} };

  root.names.SOME_LONG_NAMED_CONST_='Angel';

  root.core.Person_ = function(name) { this.name = name };

  root.api.perform_ = function(param_for_api) {  }

  window.lib_name.perform = root.api.perform;
})();

会导致：

(function() {
    var n = {
        api: {},
        core: {},
        names: {}
    };
    n.names.a = "Angel";
    n.core.b = function(n) {
        this.name = n;
    };
    n.api.c = function(n) {};
    window.lib_name.perform = n.api.c;
})();

命令： uglifyjs --beautify --mangle --mangle-props --mangle-regex="/_$/" -- file.js

如果你想破坏第一级根命名空间(api, core, names)，只需在它们上面加上下划线(api_, core_, names_)，你就可以控制;)

附注：当您修改其他 js 文件可用的属性时，您应该使用相同的命令将所有文件一起修改，因此所有文件都将使用相同的标识符。

Answer 2

最新版本的 uglify（今天）具有对象属性修改功能，请参阅 v2.4.18。它还支持保留文件，以排除您不想损坏的对象属性和变量。看看吧。

使用--mangle-props 选项和--reserved-file filename1.json filename2.json 等......

Answer 3

正如@Jan-Misker 在他的回答中解释的那样，属性名称修改不是一个好主意，因为它可能会破坏您的代码。

但是，您可以通过将属性名称定义为局部变量来解决此问题，并将所有 .properties 修改为 [keys]，以减小文件大小：

(function() {
  var API = 'api';
  var CORE = 'core';
  var NAMES = 'names';
  var SLNC = 'SOME_LONG_NAMED_CONST';

  var root = {};
  root[API]={};
  root[CORE]={};
  root[NAMES]={};

  /* util.js file */
  root[NAMES][SLNC] ='Angel';

  /* Person.js file */
  root[CORE].Person = function(name) { this.name = name };

  /* API.js with the functions we want to expose */
  root[API].perform = function(param_for_api) { /* do something */ }

  window.lib_name.perform = root[API].perform;

})();

因为现在所有的属性都变成了一个局部变量，uglify js 会破坏/缩短变量名，因此你的整体文件大小会减小：

!function(){var a="api",b="core",c="names",d="SOME_LONG_NAMED_CONST",e={};e[a]={},e[b]={},e[c]={},e[c][d]="Angel",e[b].Person=function(a){this.name=a},e[a].perform=function(){},window.lib_name.perform=e[a].perform}();

但是，减小文件大小并不意味着您将在真实服务器上获得更短的下载时间，因为通常我们的 http 传输是 gzip 压缩的，大部分重复将由您的 http 服务器压缩，它比人类做得更好。

Answer 4

除了@JanMisker 的观点（这是完全有效的）之外，重写属性是不安全的，因为它们可能会暴露给缩小范围之外的代码。

虽然自执行函数是有作用域的，如果代码只有

(function() {
  var root = { api:{}, core:{}, names:{} };
  root.names.SOME_LONG_NAMED_CONST='Angel';
  alert(root.names.SOME_LONG_NAMED_CONST); // some code that does something
})();

确实，在函数之外，没有办法访问根对象，所以重写属性名是安全的，下面的代码会产生同样的结果：

(function() {
  var a = { b:{}, c:{}, d:{} };
  a.d.e='Angel';
  alert(a.d.e);
})();

但即使您在私有范围内，您也可以访问，更重要的是从外部范围分配给变量！想象一下：

(function() {
  var root = { api:{}, core:{}, names:{} };
  root.api.perform = function(param_for_api) { /* do something */ }
  window.lib_name = root.api;
})();

您不仅公开了一个函数，而且公开了一个带有函数的对象。并且从任何可见窗口的地方都可以看到该功能。

因此，例如，在 javascript 控制台中编写以下代码会产生不同的结果，无论是否缩小：

window.lib_name.perform(asdf);

通过缩小你必须写：

window.lib_name.f(asdf);

或类似的东西。

请记住，在您的缩小范围之外总是有代码。

拥有绝对最小的 JS 并不是那么重要，但如果出于某种原因这很重要（例如：外星人绑架了你的继女，而让她回来的唯一方法是将其缩小到 100 个左右字符以下） )，您可以手动将不需要的长属性名称替换为较短的属性名称，只需确保它不会在任何地方公开，并且不会通过关联数组表示法 (root['api']) 访问。

Answer 5

当您最小化 Javascript 时，您只能更改变量的名称，api、core 和名称不是变量而是对象的属性。如果这些被最小化器更改，您可能会得到意想不到的结果。如果在你的代码中你会调用

root["api"].perform = function()...

甚至是类似的东西

function doIt(section, method, argument) {
    root[section][method](argument);
}
doIt('api','perform', 101);

所有完全合法的 JS，但最小化程序永远无法弄清楚发生了什么。