Java Web program Resource Optimization Method

Java Web program Resource Optimization Method

Author: chszs, reprinted with note. Blog homepage: http://blog.csdn.net/chszs

How do I organize and optimize CSS and script file resources?

Many CSS and JavaScript resources are scattered in different files, which may affect the loading speed of webpages.

Wro4j is a useful API that can minimize and compress web resource files, including CSS and JavaScript files. Wro4j can be configured at the time of creation-use the appropriate Maven plug-in, or use a filter to configure it at runtime.

This article describes how to configure and use wro4j when building an application.

The first step is to define the group -- the resources created and included, which is implemented by creating the wro. xml configuration file, which is placed in the WEB-INF directory. As follows:

<?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>

Then, we add the wro4j plug-in to the maven configuration file. As follows:

<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, we add the minimized resource file on the webpage as follows:

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

Wro4j home page: http://code.google.com/p/wro4j/wiki/GettingStarted