How do you minimize / obfuscate JavaScript code in a JSP that includes JSP / JSTL variables?

Question

arrays.jsp:

//... var x = <c:out value="${x}"/> <c:if test="${empty doExternal}"> processExternalArrays(); </c:if> //... 

I want to minimize / obfuscate JavaScript contained in a large JSP file in which numerous JSP / JSTL variables are mixed with JavaScript code, for example, in the snippet above.

The code uses variables populated using server-side logic and then passed to the client code, as described above.

I am already trimming my JS files with a YUI compressor, but I don't know what to do with the JavaScript code in my JSPs.

Is it possible to minimize / obfuscate this code, given that it is dynamically created?

Answer 1

Probably the best solution for you would be to use the Granule JSP tag. You can download it at http://code.google.com/p/granule/

code example:

 <g:compress> <script type="text/javascript" src="common.js"/> <script type="text/javascript" src="closure/goog/base.js"/> <script> goog.require('goog.dom'); goog.require('goog.date'); goog.require('goog.ui.DatePicker'); </script> <script type="text/javascript"> var dp = new goog.ui.DatePicker(); dp.render(document.getElementById('datepicker')); </script> </g:compress> ... 

Answer 2

Have you looked at htmlcompressor ? In short, a:

Java HTML / XML Compressor is a very small, fast and easy-to-use library that minimizes a given HTML or XML source by removing extra spaces, comments and other unnecessary characters without breaking the structure.

The main function is HTML and XML compression, but it also contains JSP tags that you can use to compress embedded JavaScript blocks using the YUI Compressor. Check out the Google Code page, especially Compress Selective Content in the JSP section .

Answer 3

I see no other way than to fully delegate the job to pure JS using Ajaxical powers in combination with Servlet, which returns the desired information on an Ajax request (unlike JSON?).

eg. in servlet

 Map<String, Object> data = new HashMap<String, Object>(); data.put("doExternal", doExternal); data.put("x", x); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(new Gson().toJson(data)); // Gson is a Java-JSON converter. 

and in JS (with a little jQuery help as it makes Ajax work less verbose)

 $.getJSON('servleturl', function(data) { var x = data.x; if (!data.doExternal) { processExternalArrays(); } }); 

This way you get pure JS without any particular server-side mess.

Answer 4

Make sure your output is encoded in gzip format (apache mod_deflate). Minimizing html / js at first can make it a little smaller, but not by much.

Answer 5

If you cannot or do not want to move your JavaScript from your HTML, one of the possibilities is to create a tag handler that wraps the contents of the <script> tags:

 <script type="text/javascript"><js:compress> ... </js:compress></script> 

A handler could probably extend SimpleTagSupport . Then you will need to learn the Java API for compressors / minifiers, like YUI Compressor or dojo ShrinkSafe, and use them to process the tag body.

Edit: Sorry, I looked at other answers, and it seems that Zack Mulgrew might reference taglib, which already does exactly what I suggest ...

Edit2: Yup, JavaScriptCompressorTag . Guess I'll have to vote for his answer :-) ...