Search code examples
javascriptreactjswebpackuglifyjs

UglifyJS not mangling props and state properties

Is there a reason why UglifyJS doesn't mangle the properties of props and state in my React code? I'm using the default options.

flippedSentence, errorMessage and lastSentences are all properties of this.state.

Or is this fully intended?

enter image description here

Solution

  • The reason of not mangling properties of objects by default (in particular of props and state) is that it can actually break your code (and it seems that it will break due to official documentation).

    You can mangle object properties using additional param, but:

    THIS WILL PROBABLY BREAK YOUR CODE. Mangling property names is a separate step, different from variable name mangling. Pass --mangle-props to enable it. It will mangle all properties in the input code with the exception of built in DOM properties and properties in core JavaScript classes.

    If you still want to mangle props - you can try control what to mangle and what exclude from mangling using options for --mangle-props like reserved.

    Also (just to note) in official documentation about optimizing performance when using react they don't use props mangling.