缩小对象属性的解决方案？

Question

在我的 JavaScript 应用程序中，我仅将几个对象用于内部目的（用户不需要访问它们）。例如：

var images={
    blank:"blank.gif",
    plus:"plus.gif",
    minus:"minus.gif"
}

当我使用像 Uglify.js 这样的缩小器时，属性名称（空白、加号、减号）保持原样。有没有办法缩小它们？

到目前为止我所考虑的：

• 在高级模式下使用 Google Closure minifier，但这会破坏我的代码
• 用变量替换对象属性（例如 var imagesBlank="blank.gif"），但这会降低代码的可读性

有没有更好的办法？

Answer 1

使用对象允许使用变量作为属性。将其包装在闭包中使得这些变量值得缩小。

//Wrap in closure
(function() {

    //Property Variables
    var blank = 0;
    var plus  = 1;
    var minus = 2;

    //Define Object
    var image = [];
    image[blank] = "blank.gif";
    image[plus]  = "plus.gif";
    image[minus] = "minus.gif";

    //Accessors - must be within closure
    image[blank]; //blank.gif
    image[plus];  //plus.gif
    image[minus]; //minus.gif

})();

要访问上述值，必须在闭包内使用常量。

如果使用 Google 的 Closure Compiler，使用 var image = []; 将更有效地声明数组，因为属性值从零开始编号，即 0、1、2。

否则，var image = {}; 也可以正常工作。

Answer 2

如果您为内部属性添加唯一前缀，则可以尝试使用 --mangle-props regex per https://github.com/mishoo/UglifyJS2。

这是它在我的 gulpfile 中的使用，它需要 gulp-uglify。

var uglifyOpts = {
    // Mangles the private "p1_" prefixed properties in an object
    mangleProperties: {
        regex: /^p1_/
    }
};

Answer 3

[2020 年 5 月更新] --mangle-props 的语法似乎对 gulp-uglify 有所改变。现在，它不是 mangleProperties，而是“mangle”对象内的“properties”对象：

这是从我的 gulpfile.js 中获取的完整代码，截至 2020 年 5 月有效：

uglify        = require('gulp-uglify');

...

const uglifyOptions = {
    mangle: {
        properties: { regex: /^p1_/ }
    }
}

...

.pipe( uglify( uglifyOptions ) )

Answer 4

好吧，在这种情况下，您可以将所有对images.blank 的引用替换为"blank.gif"，与plus 和minus 相同。如果您出于某种原因决定更改所有文件名，这确实意味着更多的工作，但没有什么是全局搜索和替换无法解决的。根本不需要images 对象。