WRO4j最大限度地减少和压缩CSS和JavaScript等web资源,WRO4j可以在编译时配置一个非常有用的API - 与适当的maven插件一起运行时。
有两种办法使用,一个在运行时混合,一个是使用Maven编译时混合。
运行时混合:
第一步在web.xml加入wrofilter:
<filter> <filter-name>WebResourceOptimizer</filter-name> <filter-class> ro.isdc.wro.http.WroFilter </filter-class> </filter>
<filter-mapping> <filter-name>WebResourceOptimizer</filter-name> <url-pattern>/wro/*</url-pattern> </filter-mapping>
|
第二步在WEB-INF 目录下配置一个wro.xml文件,如下:
<groups xmlns="http://www.isdc.ro/wro"> <group name="all"> <css>/asset/*.css</css> <js>/asset/*.js</js> </group> </groups>
|
在页面使用:
<link rel="stylesheet" type="text/css" href="/wro/all.css" />
这种方式会耗费一些服务器CPU。编译时混合,使用Maven,需要多Maven熟悉:
wro.xml文件如下
<?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>
|
然后在pom.xml中增加wro4j插件:“
<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>
|
最后我们在页面可以得到最小化的资源,如:
<link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />
|
github下载
[该贴被banq于2013-11-29 18:52修改过]
[该贴被banq于2013-11-29 18:53修改过]