Minify combined class names #248

gilbox · 2017-06-13T22:07:29Z

Hashes the combined class name to create a minified combined class name.

lencioni · 2017-06-13T22:20:37Z

src/exports.js

@@ -21,7 +21,6 @@ const StyleSheet = {
    create(sheetDefinition /* : SheetDefinition */) {
        return mapObj(sheetDefinition, ([key, val]) => {
            return [key, {
-                // TODO(gil): Further minify the -O_o--combined hashes
                _name: process.env.NODE_ENV === 'production' ?
                    `_${hashObject(val)}` : `${key}_${hashObject(val)}`,


Since this is going to be joined and hashed again, we can probably remove the leading underscore here now, right?

gilbox · 2017-06-13T22:57:46Z

ping @lencioni addressed your comment and added other improvements

gilbox · 2017-06-16T17:36:25Z

ping @xymostech

xymostech

Like @jlfwong mentioned in this comment: #246 (comment) we maybe want to be generating longer hashes now that we're combining class names, since we're increasing the risk of collisions. Unfortunately, it looks like the library we're using for hashing doesn't support generating longer hashes... Hmm. Does anyone have insight into how we might do that in a good way?

xymostech · 2017-06-16T17:57:42Z

src/util.js

@@ -132,7 +132,7 @@ export const stringifyAndImportantifyValue = (
 // ordering of objects. Ben Alpert says that Facebook depends on this, so we
 // can probably depend on this too.
 export const hashObject = (object /* : ObjectMap */) /* : string */ => stringHash(JSON.stringify(object)).toString(36);
-
+export const hashString = (string /* : string */) /* string */ => stringHash(string).toString(36);


Could you maybe add a quick docstring here, and maybe use this function inside of hashObject so it's clear that they're supposed to be using the same hash algorithm?

csilvers · 2017-06-16T18:23:09Z

If you need more than 32 bits of hash, you're kinda stuck, since js doesn't provide 64-bit integer types.

You could go back to using a google hash: https://github.com/lovell/farmhash e.g. It has fingerprint64() which gives you a 64-bit hash (as a string), and is platform independent. I don't know how fast it is, though.

Your only other solution would be to generate two separate 32-bit hashes and concatenate them. The most straightforward way to do this, if you're always hashing the same kind of object, is to add a 'salt' field to the object, and hash it once with salt=1 and a second time with salt=2 (or whatever).

Of course, this will double your hashing time. farmhash is probably faster. :-)

csilvers · 2017-06-16T18:24:20Z

(Blah, maybe not possible -- it looks like farmhash is node-specific, and just a wrapper around some C code.)

lencioni · 2017-06-16T21:34:34Z

src/inject.js

+    if (process.env.NODE_ENV === 'production') {
+        className = processedStyleDefinitions.classNameBits.length === 1 ?
+            `_${processedStyleDefinitions.classNameBits[0]}` :
+            `_${hashString(processedStyleDefinitions.classNameBits.join())}`;


What if we append processedStyleDefinitions.classNameBits.length? That would help reduce the likelihood of collisions.

…ngthHash to add extra hash bit in prod

gilbox · 2017-07-11T19:27:43Z

ping @xymostech @lencioni
I implemented something similar to @lencioni's suggestion but instead of using the length of processedStyleDefinitions.classNameBits.length I used the combined length of the stringified style definition objects since they probably exhibit more variation. However, that length is modded by 36 so that there is only one additional byte added. (see af553e3)

lencioni

This seems good to me, but it looks like CI is red.

@xymostech what do you think?

lencioni · 2017-07-17T21:42:02Z

src/inject.js

@@ -243,6 +243,12 @@ const processStyleDefinitions = (
    }
 };

+// Sum up the lengths of the stringified style definitions (which was saved as _len property)
+// and use modulus to return a single byte hash value.


This comment would be 💯 if it explained why we are adding the length to the hash.

xymostech · 2017-07-17T22:01:52Z

src/inject.js

+    let className;
+    if (process.env.NODE_ENV === 'production') {
+        className = processedStyleDefinitions.classNameBits.length === 1 ?
+            `_${processedStyleDefinitions.classNameBits[0]}` :


should we maybe be adding the length of the style definitions when there's only one class name, too? If only to make the hashes the same size/consistent?

I'm not sure what the advantage of that would be. Also, before this PR the hashes were different lengths--for example, from our homepage:

image_ay4wjb-o_O-background_1h6n1zu-o_O-fadeIn_3jddj2-o_O-backgroundSize_cover_176vplr

--so I imagine they still won't be the same size.

oh, the other thing is that we'd be hashing a hash unnecessarily. is the additional expense justified?

We wouldn't be hashing anything new, just adding the extra length char on, right? You're right though, this probably isn't important. :)

oh, you're right double-hashing shouldn't be a thing

xymostech · 2017-07-17T22:02:39Z

I think the travis failing was a fluke, I restarted it

xymostech · 2017-07-19T19:00:02Z

Okay, I'm gonna merge this! Sorry for the delay! Maybe once this lands, @lencioni or I could try updating aphrodite on our sites and see if anything breaks and how much smaller the styles get.

lencioni · 2017-07-19T20:03:51Z

That sounds good. I actually work with @gilbox so I'll let him do the honors on our site and report back here with anything interesting. 💃

xymostech · 2017-07-19T21:42:14Z

Oh ha, I didn't realize! Sounds wonderful :)

gilbox · 2017-07-31T22:39:55Z

@xymostech could we get a release please 🙏

xymostech · 2017-08-01T01:12:45Z

@gilbox Did you test things out on your site? I can make a release but I'd love for someone to do some real testing to make sure this doesn't horribly break things...

gilbox · 2017-08-01T17:12:27Z

ah ok I didn't realize that's what you meant. I'll give it a whirl

Fixes regression introduced by Khan#248

gilbox · 2017-08-23T21:48:52Z

I tested with #263, should be good to publish a new version

gilbox · 2017-08-25T19:02:25Z

ping @xymostech for the new version

Minify combined class names

e7ae179

lencioni reviewed Jun 13, 2017

View reviewed changes

Gil Birman added 4 commits June 13, 2017 15:36

rmv underscare from _name in production

bce58e9

hashString

fbe5ec3

avoid re-hashing in production

dd218b7

fix re-hash logic and add re-hash spec

d6727a3

xymostech suggested changes Jun 16, 2017

View reviewed changes

lencioni reviewed Jun 16, 2017

View reviewed changes

Gil Birman added 2 commits July 11, 2017 11:53

hashObject use hashString

a5168d7

add _len to StyleSheet definition and use it in getStyleDefinitionsLe…

af553e3

…ngthHash to add extra hash bit in prod

lencioni approved these changes Jul 17, 2017

View reviewed changes

lencioni reviewed Jul 17, 2017

View reviewed changes

xymostech reviewed Jul 17, 2017

View reviewed changes

improve comment

263b35f

xymostech approved these changes Jul 19, 2017

View reviewed changes

xymostech merged commit 7f9f602 into Khan:master Jul 19, 2017

gilbox pushed a commit to gilbox/aphrodite that referenced this pull request Aug 2, 2017

Fix injectAndGetClassName and ignore null values in styleDefinitions

a47ff8c

Fixes regression introduced by Khan#248

gilbox mentioned this pull request Aug 2, 2017

Fix injectAndGetClassName and ignore null values in styleDefinitions #263

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Minify combined class names #248

Minify combined class names #248

gilbox commented Jun 13, 2017

lencioni Jun 13, 2017

gilbox commented Jun 13, 2017

gilbox commented Jun 16, 2017

xymostech left a comment

xymostech Jun 16, 2017

csilvers commented Jun 16, 2017

csilvers commented Jun 16, 2017

lencioni Jun 16, 2017

gilbox commented Jul 11, 2017 •

edited

Loading

lencioni left a comment

lencioni Jul 17, 2017

gilbox Jul 18, 2017

xymostech Jul 17, 2017

gilbox Jul 18, 2017

gilbox Jul 18, 2017

xymostech Jul 19, 2017

gilbox Jul 19, 2017

xymostech commented Jul 17, 2017

xymostech commented Jul 19, 2017

lencioni commented Jul 19, 2017

xymostech commented Jul 19, 2017

gilbox commented Jul 31, 2017

xymostech commented Aug 1, 2017

gilbox commented Aug 1, 2017

gilbox commented Aug 23, 2017 •

edited

Loading

gilbox commented Aug 25, 2017

Minify combined class names #248

Minify combined class names #248

Conversation

gilbox commented Jun 13, 2017

Choose a reason for hiding this comment

gilbox commented Jun 13, 2017

gilbox commented Jun 16, 2017

xymostech left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

csilvers commented Jun 16, 2017

csilvers commented Jun 16, 2017

Choose a reason for hiding this comment

gilbox commented Jul 11, 2017 • edited Loading

lencioni left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xymostech commented Jul 17, 2017

xymostech commented Jul 19, 2017

lencioni commented Jul 19, 2017

xymostech commented Jul 19, 2017

gilbox commented Jul 31, 2017

xymostech commented Aug 1, 2017

gilbox commented Aug 1, 2017

gilbox commented Aug 23, 2017 • edited Loading

gilbox commented Aug 25, 2017

gilbox commented Jul 11, 2017 •

edited

Loading

gilbox commented Aug 23, 2017 •

edited

Loading