要怎样组织和优化CSS和脚本文件资源？
很多CSS和JavaScript资源分散在不同的文件中，可能对网页的载入速度有影响。
WRO4J是一个很有用的API，可以最小化和压缩Web资源文件，包括CSS和JavaScript文件。WRO4J可以在建立时进行配置——使用适当的Maven插件，也可以在运行时通过过滤器进行配置。
本文讲述怎样在构建应用程序时，配置和使用WRO4J。
第一步是需要定义分组——创建和包含的资源，这通过创建wro.xml配置文件实现，此文件放入WEB-INF目录。如下：
随后，我们在Maven配置文件中添加WRO4J插件。如下：
最后，我们在网页上添加最小化后的资源文件，如下：
很多CSS和JavaScript资源分散在不同的文件中，可能对网页的载入速度有影响。
WRO4J是一个很有用的API，可以最小化和压缩Web资源文件，包括CSS和JavaScript文件。WRO4J可以在建立时进行配置——使用适当的Maven插件，也可以在运行时通过过滤器进行配置。
本文讲述怎样在构建应用程序时，配置和使用WRO4J。
第一步是需要定义分组——创建和包含的资源，这通过创建wro.xml配置文件实现，此文件放入WEB-INF目录。如下：
- 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.jsjs>
- js minimize="false">/scripts/jqXMLUtils.pack.jsjs>
- js minimize="false">/scripts/cufon/cufon-yui.jsjs>
- js minimize="false">/scripts/cufon/font.jsjs>
- js minimize="false">/scripts/cufon/replace.jsjs>
- group>
- group name="javaonly-scripts">
- js>/scripts/scriptFile1.jsjs>
- js>/scripts/scriptFile2.jsjs>
- group>
- group name="javaonly-debugging">
- js minimize="false">/scripts/scriptDebug1.jsjs>
- js minimize="false">/scripts/scriptDebug1.jsjs>
- group>
- group name="javaonly-styles">
- css>/styles/screen/base.csscss>
- css>/styles/screen/layout.csscss>
- css>/styles/screen/content.csscss>
- css>/styles/screen/menu.csscss>
- css>/styles/screen/footer.csscss>
- css>/styles/screen/login.csscss>
- css>/styles/screen/tooltip.csscss>
- css>/styles/screen/homepage.csscss>
- group>
- groups>
- pre>
随后，我们在Maven配置文件中添加WRO4J插件。如下：
- plugin>
- groupId>ro.isdc.wro4jgroupId>
- artifactId>wro4j-maven-pluginartifactId>
- version>${wro4j.version}version>
- executions>
- execution>
- id>optimize-web-resourcesid>
- phase>compilephase>
- goals>
- goal>rungoal>
- goals>
- execution>
- executions>
- configuration>
- ignoreMissingResources>falseignoreMissingResources>
- 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>
最后，我们在网页上添加最小化后的资源文件，如下：
- link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />
- script type="text/javascript" src="/wro/javaonly-base-scripts.js">script>
