There are cases where web resources such as css and javascript resources are spread in different files.This may have an impact in the load time of a web page and in the overall performance of the application.

WRO4j is a very useful API that minimizes and compresses web resources such as css and javascript files.WRO4j can be configured either in build time – with the appropriate maven plug in- or runtime –through filters -and in this tutorial we will see a simple example on how to use and configure it during build time of the application.

As a first step need to define the groups we want to create and the resources that will contain.This can be done by creating an xml file –called wro.xml – that will be placed in WEB-INF folrder.For example:

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro">
  <group name="javaonly-base-scripts">
    <js minimize="false">/scripts/jquery-1.6.1.min.js</js>
    <js minimize="false">/scripts/jqXMLUtils.pack.js</js>
    <js minimize="false">/scripts/cufon/cufon-yui.js</js>
    <js minimize="false">/scripts/cufon/font.js</js>
    <js minimize="false">/scripts/cufon/replace.js</js>
  </group>
  <group name="javaonly-scripts">
    <js>/scripts/scriptFile1.js</js>
    <js>/scripts/scriptFile2.js</js>  
  </group>
  <group name="javaonly-debugging">
    <js minimize="false">/scripts/scriptDebug1.js</js>
    <js minimize="false">/scripts/scriptDebug1.js</js>
  </group>
  
  <group name="javaonly-styles">
    <css>/styles/screen/base.css</css>
	<css>/styles/screen/layout.css</css>
	<css>/styles/screen/content.css</css>
	<css>/styles/screen/menu.css</css>
	<css>/styles/screen/footer.css</css>
	<css>/styles/screen/login.css</css>
	<css>/styles/screen/tooltip.css</css> 
	<css>/styles/screen/homepage.css</css>
	
  </group>
</groups>
</pre>

Later on the pom.xml file we have to add the wro4j plugin.For example:

<plugin>
			    <groupId>ro.isdc.wro4j</groupId>
			    <artifactId>wro4j-maven-plugin</artifactId>
			    <version>${wro4j.version}</version>
			    <executions>
			      <execution>
			      	<id>optimize-web-resources</id>
			        <phase>compile</phase>
			        <goals>
			          <goal>run</goal>
			        </goals>
			      </execution>
			    </executions>
			    <configuration>
			      <ignoreMissingResources>false</ignoreMissingResources>
			      <jsDestinationFolder>${project.build.directory}/${project.build.finalName}/scripts/wro/</jsDestinationFolder>
			      <cssDestinationFolder>${project.build.directory}/${project.build.finalName}/styles/wro/</cssDestinationFolder>
			      <wroManagerFactory>ro.isdc.wro.maven.plugin.manager.factory.ConfigurableWroManagerFactory</wroManagerFactory>
			    </configuration>			    
			</plugin>

Finally at the wep pages we add the minified resources.For example:

<link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />
<script type="text/javascript" src="/wro/javaonly-base-scripts.js"></script>

You can find more info at the wro4j page