縮小對象屬性的解決方案？

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

})();

要訪問上述值，必須在閉包中使用常量。

如果使用谷歌的閉包編譯器，使用var image = []; 將更有效地聲明數組，因為屬性值從零開始編號，即0 , 1 , 2 。

否則， var image = {}; 效果也很好。

Answer 2

如果您為內部屬性添加了唯一前綴， --mangle-props regex根據https://github.com/mishoo/UglifyJS2嘗試--mangle-props regex 。

這是它在我的 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對象。