Prevent Closure compiler from duplicating string

Question

I'm using Google's Closure compiler to shrink my JS. There are several places in my code where I have a repeated string, e.g.

(function($){


$('.bat').append('<p>the red car has a fantastically wonderfully awe inspiringly world class engine</p><p>the blue car has a fantastically wonderfully awe inspiringly world class stereo</p><p>the green car has a fantastically wonderfully awe inspiringly world class horn</p>')

})(jQuery);

The compiler wasn't minimizing that redundancy (to be expected) so I did it myself in the 'precompiled' code:

(function($){

   var ch = ' car has a fantastically wonderfully awe inspiringly world class ';
   $('.bat').append('<p>the red'+ch+'engine</p><p>the blue'+ch+'stereo</p><p>the green'+ch+'horn</p>')

})(jQuery);

But when I run that through the compiler it reverses my compression, which results in more characters. It outputs:

(function(a){a(".bat").append("<p>the red car has a fantastically wonderfully awe inspiringly world class engine</p><p>the blue car has a fantastically wonderfully awe inspiringly world class stereo</p><p>the green car has a fantastically wonderfully awe inspiringly world class horn</p>")})(jQuery);

Is there a way to prevent this? Any idea why it's being done? Is it a run-time performance improvement?

thanks

AFAIK, Closure is doing the right thing. The variable ch is not used outside, and it saves bytes (and improves performance) by inlining it. Your way of doing it does not seem to be any sort of solution for avoiding "repeated strings". Also, beware that although repeated strings look to be inefficient in storage, they do not affect gzipped size. — Stephen Chung
– Stephen Chung, Commented Nov 9, 2011 at 12:31

gustavohenke · Accepted Answer · 2022-04-21 06:52:12Z

3

This behavior is documented here:

https://github.com/google/closure-compiler/wiki/FAQ#closure-compiler-inlined-all-my-strings-which-made-my-code-size-bigger-why-did-it-do-that

However, one approach I've used to avoid when I have add a very large string that is worth deduplicating is to wrap the value in a function:

const getCssStyleSheetText = () => "...";

and to call that function when I need the text. The compiler uses a different heuristic when inlining functions and will only inline a function if it estimates that it will reduce code size. Therefore a function returning a string will be inlined if it is called once but left alone if it is called many times.

Ideally, the compiler would be a little more nuanced about inlining strings but in general the approach it takes works out well enough.

edited Apr 21, 2022 at 6:52

gustavohenke

41.5k14 gold badges125 silver badges133 bronze badges

answered Nov 10, 2011 at 16:20

John

5,46817 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent Closure compiler from duplicating string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related