Java Web program uses wro4j to merge, Compress JS, CSS and other static resources

Source: Internet
Author: User

In the Web project, JS, CSS Merge compression, not only to reduce the number of HTTP requests, reduce the use of broadband resources, but also effectively manage the introduction of various JS, CSS, so that the whole project more orderly. For access users, the greater benefit is the increase of the page opening speed, greatly improving the user experience.

Therefore, the Internet all kinds of web sites, through a variety of means, static files to merge, compression, dynamic separation, using CDN acceleration. This achieves the optimization of website access speed.
The everycoding.com website uses Java language development. Therefore, Java-related third-party jar:wro4j is used to compress JS, CSS. This article mainly introduces how Java Web program uses wro4j to merge, Compress JS, CSS and other static resources.

1. First download Wro4j-core.1.6.2.jar,maven managed projects can use the following dependencies to get the rack package.

    1. <dependency>
    2. <groupId>ro.isdc.wro4j</groupId>
    3. <artifactId>wro4j-core</artifactId>
    4. <version>1.6.2</version>
    5. </dependency>


2. Configure JS, CSS merge policy. Create a new Wro.xml file, placed under the Web-inf directory
namely:/src/main/webapp/web-inf/wro.xml. Take everycoding official website code as an example, the configuration details are as follows:

  1. <? XML version="1.0" encoding="UTF-8"?>
  2. <groups xmlns="Http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/ 2001/xmlschema-instance "
  3. xsi:schemalocation="Http://www.isdc.ro/wro wro.xsd">
  4. <group name="Basic">
  5. <css>/static/css/front.css</css>
  6. <js>/static/js/jquery.js</js>
  7. <js>/static/js/jquery.paging.min.js</js>
  8. <js>/static/js/front/global.js</js>
  9. <js>/static/js/front/search.js</js>
  10. </group>
  11. <group name="Custom">
  12. <css>/static/css/front.css</css>
  13. <css>/static/css/comment/comment.css</css>
  14. <css>/static/plugins/syntaxhighlighter/shcore.css</css>
  15. <js>/static/js/front/coding.js</js>
  16. </group>
  17. </groups>


3. Introduce the merged JS, CSS in the View page. Details see how the everycoding.com site is introduced

    1. <link href= "/static/css/basic.css?minimize=false&v=1433678168807" rel=" Stylesheet ">
    2. <script src="/static/js/basic.js?minimize=false&v=1433524342015"></script >


4. Configure the WRO4J filter in Web. XML to make the JS, CSS Merge policy effective. The code is configured in the following way:
Among them,/static/is the everycoding website to place static files directory, specific configuration please refer to their own projects

  1. <filter>
  2. <filter-name>webresourceoptimizer</filter-name>
  3. <filter-class>
  4. Ro.isdc.wro.http.WroFilter
  5. </filter-class>
  6. <init-param>
  7. <param-name>Debug</param-name>
  8. <param-value>true</param-value>
  9. </init-param>
  10. <init-param>
  11. <param-name>disableCache</param-name>
  12. <param-value>true</param-value>
  13. </init-param>
  14. <!--<init-param> <param-name>gzipResources</param-name> <param-value>false</ Param-value>
  15. </init-param> <init-param> <param-name>cacheUpdatePeriod</param-name> <param-value> 1</param-value>
  16. </init-param> <init-param> <param-name>modelUpdatePeriod</param-name> <param-value> 1</param-value>
  17. </init-param> <init-param> <param-name>minimizeEnabled</param-name> <param-value> True</param-value>
  18. </init-param>
  19. </filter>
  20. <filter-mapping>
  21. <filter-name>webresourceoptimizer</filter-name>
  22. <url-pattern>/static/*</url-pattern>
  23. </filter-mapping>


5. WRO4J properties configured in Web. XML The role of debug
Debug: In the development environment, it is generally set to true. Production environment set to false
So what is the benefit of setting debug to true in the development environment?
The reason is: When Debug is False, the introduction of JS, CSS in the view is merged compressed code, especially JS, is not conducive to our development process breakpoints debugging work.
If, in the development process, we want to debug the JS code breakpoint, you need to set debug to True. At the same time, the view introduces the JS code part, need to add parameters: Minimize=false. Show: Merge, but do not compress JS.
such as:/static/js/basic.js?minimize=false
Note that when Debug=false, the function of this parameter will be invalidated. Js, CSS in the build environment must be compressed state.

6. WRO4J Related Configuration Properties

Property Tacit Recognition Value Describe
Debug True True represents the development environment, false represents the build environment
Minimizeenabled True Whether to compress resources
Gzipresources True True indicates that response will open gzip
Resourcewatcherupdateperiod 0 How the frequency of static resource updates is monitored, 0 indicates no monitoring.      The cache of a static resource is invalidated when it is monitored for updates to resources. (Since 1.4.8)
Resourcewatcherasync False Monitoring of static resources for asynchronous updates, this value is meaningful when the property resourcewatcherupdateperiod configuration is greater than 0 o'clock (since 1.7.3)
Cacheupdateperiod 0 How often the cache is refreshed. 0 indicates that the static cache is not refreshed.
Modelupdateperiod 0 What frequency refreshes the Wro.xml merge compression strategy. 0 indicates no refresh.
Header See website description
DisableCache False Whether to disable the static resource cache after 1.7.6 the version is deprecated
Parallelpreprocessing False Whether to turn on preprocessor parallel execution for increased efficiency
ConnectionTimeout 2000 Time-out for external resource access, 1.4.5 after version valid
Managerfactoryclassname N/A Default Basewromanagerfactory Management
Encoding UTF-8 Set the read-write encoding format
Ignoremissingresources True When false, the missing resource throws an exception. True to ignore these exceptions.
Ignoreemptygroup True When false, an empty ingest link fails. True, is ignored. The version is valid after 1.4.5.
Ignorefailingprocessor False When true, the problematic resource is introduced in the native way. Valid after 1.4.7 version.
Cachegzippedcontent False Whether the cache uses gzipped static content. Version valid after since 1.4.4
Jmxenabled True Whether to turn off jmx.
Mbeanname Wro4j JMX console See official website


The detailed usage of wro4j can be consulted: http://code.google.com/p/wro4j/wiki/Installation
If your Java Web project wants to deploy static files separately, you can refer to: http://everycoding.com/coding/67.html

Java Web program uses wro4j to merge, Compress JS, CSS and other static resources

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.