WRO4j :Java Web資源壓縮

banq發表於2013-11-29
JavaWeb
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>
<p class="indent">


第二步在WEB-INF 目錄下配置一個wro.xml檔案，如下：

  <groups xmlns="http://www.isdc.ro/wro">
      <group name="all">
        <css>/asset/*.css</css>
        <js>/asset/*.js</js>
      </group>
    </groups>      
<p class="indent">

在頁面使用：
<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>
<p class="indent">


然後在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>
<p class="indent">


最後我們在頁面可以得到最小化的資源，如：

<link rel="stylesheet" type="text/css" href="/wro/javaonly-styles.css" />

<p class="indent">


github下載

[該貼被banq於2013-11-29 18:52修改過]

[該貼被banq於2013-11-29 18:53修改過]

相關文章