Javascript und CSS komprimieren mit Jawr
13. Januar 2009
Jawr ist ein Java Servlet zum komprimieren der Javascript und CSS Dateien auf dem Webserver. Dieses Komprimieren geschieht serverseitig und der Entwickler muss die Dateien nicht per Hand komprimieren.
Bundles
Besonders praktisch ist die Möglichkeit, viele Dateien zu einen Bundle zusammenzufügen. Somit kann man auch die Anzahl der Request reduzieren, aber in der Entwicklung mit vielen einzelnen JS und CSS Dateien arbeiten. Optimalerweise, sollte man für jede Javascript Klasse eine eigene Datei verwenden.
Installation mit Maven 2
Die Installation in einen Maven Projekt ist genial einfach. Man fügt in die Pom Datei nur folgende Zeile ein:
<dependency> <groupId>net.jawr</groupId> <artifactId>jawr</artifactId> <version>[2,]</version> </dependency>
Ein Repository muss man auch noch einfügen:
<repository> <id>maven2-repository.dev.java.net</id> <name>Java.net Repository for Maven</name> <url>http://download.java.net/maven/2/</url> <layout>default</layout> </repository>
Log4J
Jawr benötigt zusätzlich Log4J. Deshalb muss noch folgende Abhängigkeit eingefügt werden:
<dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.15</version> <type>jar</type> <scope>compile</scope> <exclusions> <exclusion> <groupId>com.sun.jmx</groupId> <artifactId>jmxri</artifactId> </exclusion> <exclusion> <groupId>com.sun.jdmk</groupId> <artifactId>jmxtools</artifactId> </exclusion> <exclusion> <groupId>javax.jms</groupId> <artifactId>jms</artifactId> </exclusion> </exclusions> </dependency>
Hierbei ist es wichtig dass die JMX Abhängigkeit ausgeklammert wird, da Maven sonst eventuell nicht startet.
In die web.xml müssen nun noch die Servlets und das Mapping eingetragen werden:
<servlet> <servlet-name>JavascriptServlet</servlet-name> <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class> <init-param> <param-name>configLocation</param-name> <param-value>jawr.properties</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>CSSServlet</servlet-name> <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class> <init-param> <param-name>configLocation</param-name> <param-value>jawr.properties</param-value> </init-param> <init-param> <param-name>type</param-name> <param-value>css</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>JavascriptServlet</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CSSServlet</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping>
Konfiguration
Die Konfiguration geschieht in der jawr.properties
jawr.debug.on=false jawr.gzip.on=true jawr.gzip.ie6.on=false jawr.charset.name=UTF-8
Jawr erkennt automatisch ob der Browser gzip unterstützt. Wenn die Einstellung jawr.debug.on auf true steht, werden Dateien nicht komprimiert und die Bundles werden einzeln geladen. Das ist in der Entwicklung sehr wichtig.
jawr.js.bundle.basedir=/js jawr.js.bundle.names=lib,core,model jawr.js.bundle.lib.id=/bundles/lib.js jawr.js.bundle.lib.mappings=/js/lib/** jawr.js.bundle.core.id=/bundles/core.js jawr.js.bundle.core.mappings=/js/helper/**,/js/.../version.js,/js/.../all/** jawr.js.bundle.model.id=/bundles/model.js jawr.js.bundle.model.mappings=/js/kosmos/cockpit/**,/js/.../../DragAndDrop.js,/js/.../reportone/**
Hier definiere ich 3 verschiedene Bundles. Die Bundles können aus ganzen Ordnern oder einzeln Dateien bestehen. Doppelte Dateien überspringt Jawr automatisch.
jawr.css.bundle.basedir=/css jawr.css.bundle.names=style jawr.css.bundle.style.id=/style.css jawr.css.bundle.style.mappings=/css/** jawr.csslinks.flavor = xhtml
Hier wird ein CSS Bundle definiert. Wichtig ist die Einstellung jawr.csslinks.flavor = xhtml , da der Link Tag sonst nicht geschlossen wird.
In der JSP muss nur noch die Taglib angegeben werden.
<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
Und dieTags für die Bundles eingefügt werden.
<jwr:style src="/style.css" media="all" /> <jwr:script src="/bundles/lib.js"/> ...
Den Unterschied merkt man bei umfangreichen Javascript Anwenungen deutlich.
Tags: java, Javascript