2

I have a requirement to minify the constant values in the javascript project I am working on.

Currently I define the constants as something like this:

export const Constants = {
    I_AM_CONSTANT: 'hello',
    ANOTHER_CONSTANTS: 10,
    YET_ANOTHER_CONSTANTS: false,
    NO_MORE_CONSTANT: 'end'
};

and I put this object into a separate file.

Then I use UglifyPlugin of WebPack to minify the codes.

But what I get is something like 

e.Constants = {
    I_AM_CONSTANT: 'hello',
    ANOTHER_CONSTANTS: 10,
    YET_ANOTHER_CONSTANTS: false,
    NO_MORE_CONSTANT: 'end'
};

It's like no minification effect at all. Can anyone tell me what is the correct way to do the minifications for these constants? How can I change my code? I also would like to know some best practice of writing constant values in javascript if possible.

newguy
  • 5,668
  • 12
  • 55
  • 95
  • It can't minify these because they can be accessed in lots of locations and the minification software can't be sure where they're being used. You likely can't minify this object but if you use closures correctly in the consuming code the minification effect should help in the consuming code. – Liam Aug 17 '17 at 09:59
  • 2
    You can call it a constant, but what you're declaring is just a property name. They're not minified because it would potentially break references. E.g. `Constants['I_AM_A_CONSTANT'] would no longer be correctly resolved. – Robby Cornelissen Aug 17 '17 at 09:59
  • @RobbyCornelissen bad news for me. But is there a way to change the way they represent and minify them? I don't want to have so many unminified code in my project. – newguy Aug 17 '17 at 10:01
  • Do you need to export them? If not, just declaring `const I_AM_CONSTANT = 'hello'` might get minified. – Robby Cornelissen Aug 17 '17 at 10:03
  • @RobbyCornelissen I export them to be used in different files in my project. They are used both in server side and client side. But I think I am OK with two copies on each side. I just don't know how to use them in different files if I don't export them. – newguy Aug 17 '17 at 10:07
  • @Liam would love to know how to use closures correctly. Do you know any resource that helps? – newguy Aug 17 '17 at 10:08
  • I've added an answer illustrating what I mean. For more info have a look at [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1) – Liam Aug 17 '17 at 10:10

1 Answers1

2

You can't minify what you have because the minified won't know where there to be used. If you used injection correctly though the consuming code can be minified, e.g.

var closure = function(constants){
    //constants used lots in here.
}(e.Constants);

could safely be minfied to

var closure = function(c){
    //c used lots in here.
}(e.Constants);

e.constants gets closed over into a local variable constants, this can be happily minified to c as the minifer knows it's scope, it's inside the closure and is injected.

Where as this:

function closure(){
   //e.constants used lots in here
}

can't be minified because any change to e.constants would be breaking.

Liam
  • 27,717
  • 28
  • 128
  • 190
  • OK. I use ES6 ONLY in my project. Looks like I'll pretty much have to change everything to be able to minify the constants. I can't believe that new features affect the ability of minification so much. I just wish babel could change my functions to the first style you mentioned. – newguy Aug 17 '17 at 13:48
  • It depends on how you've implemented your code. Generally encapsulation is always a good idea ES6 or ES5 – Liam Aug 17 '17 at 13:51