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
This behavior is documented here:
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.