It’s standard practice for minifiers to compress function and variable names, since doing so is mostly assumed to be transparent to the developer. Microbundle makes it easy to extend this approach to property names as well, which can have a large impact on size for projects containing many objects or classes. This process is referred to as “property mangling” and is implemented using Terser, just like standard variable mangling.
This definition is tailored to microbundle but the tldr is property names can have large impact on size .
To enable property mangling, you must specify a regular expression pattern that dictates which properties should be compressed to shorter names. This can be done in a mangle.json configuration file, or in a "mangle" key in your package.json.
The help object clearly describes what this file is about.
"help": { "what is this file?": "It controls protected/private property mangling so that minified builds have consistent property names.", "why are there duplicate minified properties?": "Most properties are only used on one type of objects, so they can have the same name since they will never collide. Doing this reduces size."},
In the above code snippet, we are instructing bundler to shorten any properties matching the pattern ^_, which would be any property beginning with an underscore. This is the most common usage, as underscore-prefixed properties are often used to emulate "private" properties in JavaScript.
Mangled property names become single-character names by default, however these can be overridden in the mangle configuration. The property name mappings are stored in mangle.json alongside the configuration for which names should be mangled. This way every build shortens the name to the same property named defined in this props object.
Some of the information presented in this article is picked from Microbundle wiki.
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
