Some tricks for shave bytes (-11B for esm) #421
Conversation
* update.js - Use bitwise XOR for indexOf check * parse.js - Optimized check for !=undefined * hash.js - Remove the extra condition and variable * compile.js - Just moved the condition
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/cristianbote/goober-rocks/2HiUmSoiLuD3vzhRLs9sZNjzgeVa |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit a41e580:
|
src/core/parse.js
Outdated
| : key | ||
| ); | ||
| } else if (val != undefined) { | ||
| } else if (val + 1) { |
There was a problem hiding this comment.
undefined + 1 = NaN but null + 1 = 1. So you can use this trick to handle null values.
| let _as = tag; | ||
|
|
||
| // If this is a string -- checking that is has a first valid char | ||
| if (tag[0]) { | ||
| // Try to assign the _as with the given _as value if any | ||
| _as = _props.as || tag; | ||
| // And remove it | ||
| delete _props.as; | ||
| } | ||
| // Try to assign the _as with the given _as value if any | ||
| let _as = (tag[0] && _props.as) || tag; | ||
| // And remove it | ||
| tag[0] && delete _props.as; |
There was a problem hiding this comment.
Tried this one locally and increases the overall size 😵💫
| */ | ||
| export let update = (css, sheet, append) => { | ||
| sheet.data.indexOf(css) == -1 && (sheet.data = append ? css + sheet.data : sheet.data + css); | ||
| ~sheet.data.indexOf(css) || (sheet.data = append ? css + sheet.data : sheet.data + css); |
There was a problem hiding this comment.
🙌 this one shaves around 4B
| update( | ||
| (cache[className] = | ||
| cache[className] || | ||
| // If there's no entry for the current className | ||
| // Parse it | ||
| parse( | ||
| // For keyframes | ||
| keyframes | ||
| ? // Build the _ast_-ish structure if needed | ||
| { | ||
| ['@keyframes ' + className]: | ||
| stringifiedCompiled !== compiled ? compiled : astish(compiled) | ||
| } | ||
| : stringifiedCompiled !== compiled | ||
| ? compiled | ||
| : astish(compiled), | ||
| global ? '' : '.' + className | ||
| )), | ||
| sheet, | ||
| append | ||
| ); |
There was a problem hiding this comment.
I believe this is where the shaves are huge. The large downside though is the readability and maintenance effort if we keep it in this form. I would rather see this as a last resort.
| tail = res === false ? '' : res; | ||
| tail = res; | ||
| } | ||
| } | ||
| return out + next + (tail == null ? '' : tail); | ||
| return out + next + (tail == null || tail === false ? '' : tail); |
There was a problem hiding this comment.
For some reason this also increases the size.
There was a problem hiding this comment.
Hey @RealPeha would you be open to only leave this two changes:
- https://github.com/cristianbote/goober/pull/421/files#diff-990212c4bbe286410abd4e28bab4e1c8549abc5447855b21bcdabdd65f651dd2R46
- https://github.com/cristianbote/goober/pull/421/files#diff-c172bd93077b152ff54176dc84cca295f93e5889871c70911ef02a4cbaaf3836R20
These two are shaving together close to 6B in my tests -- or more.
update.js- Use bitwise NOT forindexOfcheckparse.js- Optimized check for!= undefinedhash.js- Remove the extra condition and variablecompile.js- Just moved the conditionstyled.js- replacingifwith ternary operatorBefore:
1188 B:
goober.esm.js.gz1188 B:
goober.modern.js.gz1183 B:
goober.cjs.gz1257 B:
goober.umd.js.gzAfter:
1177 B:
goober.esm.js.gz(-11B)1177 B:
goober.modern.js.gz(-11B)1175 B:
goober.cjs.gz(-8B)1240 B:
goober.umd.js.gz(-17B)