0

Currently, I'm using Closure Compiler just on the javascript file. Now I also want to minify and rename the CSS classes with shorter names.

Is there a way to avoid having to rewrite every jquery CSS string-based selector in my .js file (ie. $('#SomeID') or $('.SomeClass')) to a variable-based selector? Since most of the HTML is actually generated at runtime, I could easily moved the skeleton HTML that's initially in the page to the .js file and have the document.ready function first put the skeleton HTML needed for the app on the page. Would that avoid the rewriting of the CSS selectors or would the selectors still need to be rewritten as properties of an object?

The doc is here but I didn't find it clear http://code.google.com/p/closure-stylesheets/#Renaming

Thanks for your suggestions.

Spudley
  • 166,037
  • 39
  • 233
  • 307
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • 1
    presumably you want to do this because you're trying to optimise the download size/speed of your site. It's an admirable idea, but I suspect the effect would be marginal at best. I'd suggest that it's almost certain that there are other ways you could optimise that would have a much bigger effect than this. – Spudley Sep 01 '12 at 06:13

1 Answers1

5

The short answer to your question is "no there isn't".

Given that you've specified that you're using jQuery selectors here, we can see that any tool for this job would need to rewrite your all three of your HTML, CSS and JS code.

The JS code in particular will be very tricky, because of the possibility of building the jQuery selectors using substrings - eg $('#prefix_' + suffix). I don't know if you've done that kind of thing or not, but the ability to do it makes it virtually impossible to write a completely reliable tool that can rename your IDs and classes, but still have your JS code work correctly. If your code is relatively simple, it may be possible to write it so that it would work for you, but no-one is going to release a tool for general use that would break so easily.

In addition, I don't believe that such a tool would be particularly useful. It sounds like a case of excessive optimisation.

Optimisation is great -- it's good to make an effort to make your site as fast as possible. But one of the key arts of good optimisation is to optimise the areas where you are slowest. I would be extremely surprised if the major bottleneck in your code is the length of your class names.

My advice therefore is to spend your time finding out where the real bottlenecks are in your code, and deal with those. The effect is likely be far greater than all the minification efforts you've done in total so far.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Ok, thanks for the answer. In some ways, the goal is to minimize size because some of my CSS selectors have pretty long names. I wanted to make the code easy to read so some selectors are named '.RPanelTopAppoinmentsActiveAppnt' for instance. The other lesser goal is to obfuscate the code, not to make it impossible to reverse engineer but just to make it a slower process. The combined .js files are about 14K lines and the combined .css files are about 4K lines. In my javascript, I don't have anything like $('#prefix_' + suffix) but I guess I'm still going to need to rewrite every selector... – frenchie Sep 01 '12 at 18:40
  • In the compiled output, I want to put all my static HTML in the .js file and use .html() in the document.ready() to put that HTML in the document; that way I won't have to deal with Closure Templates. Do you think that is a good idea? – frenchie Sep 01 '12 at 18:43
  • @frenchie - re your last point: no, I don't think it sounds like a good idea. If you do that, you will kill virtually all of your site's SEO rank. The HTML document is the search engine's primary source to work out what the page is about and how to rank it. Google does read Javascript code too, but the HTML is where it concentrates its efforts, so if you don't have any HTML code, Google will dump your site to the bottom of the listings. – Spudley Sep 01 '12 at 20:49
  • @frenchie - re obfuscating the code. Bear in mind that this is also likely to damage your SEO rankings too. Obfuscating the JS code is fine, but the HTML is important for the search engines to be able to read it. If you're worried about people stealing your code, don't be: your HTML and CSS code is really not worth the effort to steal, and even if it were, there are a hundred million other places they could also get it. Besides, if one wants to see how a particular CSS trick is done, Firebug will show you as clear as day, no matter how obfuscated the selectors are. – Spudley Sep 01 '12 at 20:58
  • I should have specified: I'm talking about a single-page app for logged-in users, so SEO is of no concern for that particular page. The homepage is separate and will be left clear. I'm not concerned about the CSS attributes, it's just that the CSS class names and IDs are also inside the javascript so even if the js is obfuscated, it's possible to tell which part of the page a particular function deals with. That's why I'm looking into CSS compiler renaming. I also know that determined people could reverse engineer everything but 13K lines of .js + 3K lines ofCSS all obfuscated raises the bar. – frenchie Sep 01 '12 at 23:01