In my JavaScript application, I use several objects for internal purposes only (the users don't need to access them). for example:

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

When I use a minifier like Uglify.js, the property names (blank, plus, minus) are kept as is. Is there a way to minify them?

What I have considered so far:

• use Google Closure minifier in advanced mode, but this crushes my code
• replace object properties with variables (e.g. var imagesBlank="blank.gif") but it makes the code less readable

Is there a better way?

In my JavaScript application, I use several objects for internal purposes only (the users don't need to access them). for example:

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

When I use a minifier like Uglify.js, the property names (blank, plus, minus) are kept as is. Is there a way to minify them?

What I have considered so far:

• use Google Closure minifier in advanced mode, but this crushes my code
• replace object properties with variables (e.g. var imagesBlank="blank.gif") but it makes the code less readable

Is there a better way?

• javascript
• object
• minify

• 3 use Google Closure minifier in advanced mode, but this crushes my code ... you should carefully read the documentation and adjust your code so that it does not crash. I think the Google Closure compiler is the best option. – Felix Kling Commented Feb 21, 2012 at 17:05
• @FelixKling would you have specific links related to my question? Also, feel free to post them as an answer so that I can accept it! – Christophe Commented Feb 21, 2012 at 19:53
• No, not really... only the documentation (code.google.com/closure/compiler/docs/api-tutorial3.html). – Felix Kling Commented Feb 21, 2012 at 21:07
• 1 Any minifier will not know that those properties are not to be accessed from outside. Therefore none will touch them. Closure Compiler simple mode also. The way to keep such private variables will be to capture them through a closure. This way they are always renamed by minifiers and your users will not be able to touch them. – Stephen Chung Commented Feb 22, 2012 at 3:01

4 Answers 4

Using an object allows the use of variables as properties. Wrapping it in a closure makes those variables worthy of minifying.

//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

})();

To access the values above, the constants must be used within the closure.

If using Google's Closure Compiler, using var image = []; will be more efficient in declaring the array since the property values are numbered from zero, i.e. 0, 1, 2.

Otherwise, var image = {}; works well too.

If you uniquely prefix your internal properties, you can try --mangle-props regex per https://github.com/mishoo/UglifyJS2.

Here's its use in my gulpfile which requires gulp-uglify.

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

[Update May 2020] The syntax for --mangle-props appears to have has changed a little for gulp-uglify. Instead of mangleProperties it's now a 'properties' object inside a 'mangle' object:

Here's my complete code taken from my gulpfile.js, which works as of May 2020:

uglify        = require('gulp-uglify');

...

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

...

.pipe( uglify( uglifyOptions ) )

Well, in this case, you could just replace all references to images.blank with "blank.gif", same with plus and minus. While that does mean more work if you, for some reason, decide to change all your filenames, there's nothing a global search and replace can't fix. No need for the images object at all.