Reduced size with terser #438
Conversation
### Feature Proposal
This is probably something for one of the plugins that are currently used --- itself.
`mangle-props` (from uglifyjs) could reasonably reduce the bundle size by a few KiB -- though that's not certain...
description from uglify-js:
```
--mangle-props [options] Mangle properties/specify mangler options:
`builtins` Mangle property names that overlaps
with standard JavaScript globals.
`debug` Add debug prefix and suffix.
`domprops` Mangle property names that overlaps
with DOM properties.
`keep_quoted` Only mangle unquoted properties.
`regex` Only mangle matched property names.
`reserved` List of names that should not be mangled.
```
Similarly duplicated on options.mangle.properties: https://github.com/mishoo/UglifyJS2/blob/master/README.md#minify-options
One of the issues I'm having is... that there is no definite apparent entry point in rollup or well... any particular plugin that gets used, making it quite ... difficult to find. I eventually found out that terser is the thing which minifies JS and it's simple enough to set it up --- https://github.com/terser-js/terser#mangle-properties-options --- though I heavily presume that it won't cause _too many_ other issues.
Requires TrySound/rollup-plugin-terser#33 to work properly at current.
|
Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). 📝 Please visit https://cla.developers.google.com/ to sign. Once you've signed (or fixed any issues), please reply here (e.g. What to do if you already signed the CLAIndividual signers
Corporate signers
ℹ️ Googlers: Go here for more info. |
|
I signed it! |
|
CLAs look good, thanks! ℹ️ Googlers: Go here for more info. |
|
Currently is totally broken, hrmm... May make my own terser thing and test... |
|
Currently it seems that |
|
Your minifier settings mangled our AMD loader, specifically this line. It renames |
|
In that case, probably with |
|
Still broken, but only slightly less so. I'll continue when I get back on my laptop soon. |
…his" being "null" are ... awkward.
This evaluates to
{
vars: { props: [Object: null prototype] {} },
props: {
props: [Object: null prototype] {
'$__assign': 't',
'$__extends': 'o',
'$__rest': 'i',
'$__decorate': 'u',
'$__param': 'l',
'$__metadata': 's',
'$__awaiter': '_',
'$__generator': 'h',
'$__exportStar': 'm',
'$__values': 'p',
'$__read': 'j',
'$__spread': 'S',
'$__await': 'O',
'$__asyncGenerator': 'k',
'$__asyncDelegator': 'R',
'$__asyncValues': 'g',
'$__makeTemplateObject': 'P',
'$__importStar': 'T',
'$__esModule': 'D',
'$__importDefault': 'G',
'$__html': 'v',
'$__key': 'H',
'$__ref': 'L',
'$__state': 'A',
'$__onChange': 'B',
'$__onFinishChange': 'F',
'$__prev': 'C',
'$__checkbox': 'I',
'$__select': 'M',
'$__input': 'J',
'$__min': 'N',
'$__max': 'V',
'$__step': 'X',
'$__impliedStep': 'Y',
'$__precision': 'U',
'$__truncationSuspended': 'W',
'$__background': 'K',
'$__foreground': 'Z',
'$__button': '$',
'$__color': 'q',
'$__temp': 'tt',
'$__selector': 'nt',
'$__saturation_field': 'it',
'$__field_knob': 'ot',
'$__field_knob_border': 'et',
'$__hue_knob': 'rt',
'$__hue_field': 'st',
'$__input_textShadow': 'ut',
'$__ul': 'at',
'$__folders': 'ct',
'$__controllers': 'dt',
'$__rememberedObjects': 'ht',
'$__rememberedObjectIndecesToControllers': 'ft',
'$__listening': 'lt',
'$__preset_select': 'pt',
'$__closeButton': 'vt',
'$__resizeHandler': 'gt',
'$__li': 'wt',
'$__gui': 'bt',
'$__resize_handle': 'xt',
'$__save_row': 'yt'
}
}
}
New output (lib/minify to thing):
{
vars: { props: [Object: null prototype] {} },
props: {
props: [Object: null prototype] {
'$__assign': 't',
'$__extends': 'o',
'$__rest': 'i',
'$__decorate': 'u',
'$__param': 'l',
'$__metadata': 's',
'$__awaiter': '_',
'$__generator': 'h',
'$__exportStar': 'm',
'$__values': 'p',
'$__read': 'j',
'$__spread': 'S',
'$__await': 'O',
'$__asyncGenerator': 'k',
'$__asyncDelegator': 'R',
'$__asyncValues': 'g',
'$__makeTemplateObject': 'P',
'$__importStar': 'T',
'$__esModule': 'D',
'$__importDefault': 'G',
'$__html': 'v',
'$__key': 'H',
'$__ref': 'L',
'$__state': 'A',
'$BREAK': 'B',
'$THREE_CHAR_HEX': 'F',
'$SIX_CHAR_HEX': 'C',
'$CSS_RGB': 'I',
'$CSS_RGBA': 'M',
'$HEX': 'J',
'$RGB_ARRAY': 'N',
'$RGBA_ARRAY': 'V',
'$RGBA_OBJ': 'X',
'$RGB_OBJ': 'Y',
'$HSVA_OBJ': 'U',
'$HSV_OBJ': 'W',
'$COMPONENTS': 'K',
'$__onChange': 'Z',
'$__onFinishChange': '$',
'$__prev': 'q',
'$__checkbox': 'tt',
'$__select': 'nt',
'$__input': 'it',
'$__min': 'ot',
'$__max': 'et',
'$__step': 'rt',
'$__impliedStep': 'st',
'$__precision': 'ut',
'$__truncationSuspended': 'at',
'$__background': 'ct',
'$__foreground': 'dt',
'$__button': 'ht',
'$__color': 'ft',
'$__temp': 'lt',
'$__selector': 'pt',
'$__saturation_field': 'vt',
'$__field_knob': 'gt',
'$__field_knob_border': 'wt',
'$__hue_knob': 'bt',
'$__hue_field': 'xt',
'$__input_textShadow': 'yt',
'$__ul': 'At',
'$__folders': 'kt',
'$__controllers': 'Ot',
'$__rememberedObjects': 'Et',
'$__rememberedObjectIndecesToControllers': 'St',
'$__listening': 'Rt',
'$DEFAULT_WIDTH': 'Bt',
'$__preset_select': 'Ft',
'$CLASS_CLOSED': 'Ct',
'$__closeButton': 'Gt',
'$TEXT_OPEN': 'jt',
'$TEXT_CLOSED': 'Ht',
'$CLASS_MAIN': '_t',
'$CLASS_CLOSE_BUTTON': 'zt',
'$CLASS_CLOSE_TOP': 'Dt',
'$CLASS_CLOSE_BOTTOM': 'It',
'$CLASS_AUTO_PLACE_CONTAINER': 'Mt',
'$CLASS_AUTO_PLACE': 'Tt',
'$__resizeHandler': 'Jt',
'$__li': 'Nt',
'$CLASS_CONTROLLER_ROW': 'Vt',
'$__gui': 'Xt',
'$CLASS_DRAG': 'Pt',
'$__resize_handle': 'Qt',
'$__save_row': 'Yt',
'$CLASS_TOO_TALL': 'Ut'
}
}
}
Can further do it by whitelisting known properties (eg state, prevState) but will be annoying to set/get and so on. If terser was to implement a whitelist based system rather than using a reserved/regex system that would be preferred.
|
For the time being, being very lighthanded on it and using only properties that are either constants (allcaps, snake case) or internal functions ( |
|
If we can whitelist more properties, that would be very nice; thank you. |
|
I should probably have the name cache automatically output to ... famous last words. |
|
... Should probably only keep certain properties (eg width, height, mines) in the name cache but uh... hrmm. |
|
For the time being, I believe this is ready to check over again. It uses a regex of white-listed properties, so currently doesn't cause any notable errors... okay wat so now I'm seeing errors on the info screen? |
|
Errors about undefined and so on May be renaming of dot and stuff... |
|
Gonna be honest, this seems like a lot of work to save 1kB. |
|
Yeah, it is. It gets hard and whitelisting properties becomes difficult. Not to mention that I have no idea how the errors that came up have come up. |
Relies on TrySound/rollup-plugin-terser#33 at current due to single use stuff.Removed, inlined instead.mangle-props(from uglifyjs/terser) could reasonably reduce the bundle size by a few KiB -- though that's not certain...description from uglify-js:
Similarly duplicated on options.mangle.properties: https://github.com/mishoo/UglifyJS2/blob/master/README.md#minify-options
Should (realistically) reduce size.