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

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:

2. <? XML version="1.0" encoding="UTF-8"?>
4. <groups xmlns="Http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/ 2001/xmlschema-instance "
6. xsi:schemalocation="Http://www.isdc.ro/wro wro.xsd">
8. <group name="Basic">
10. <css>/static/css/front.css</css>
12. <js>/static/js/jquery.js</js>
14. <js>/static/js/jquery.paging.min.js</js>
16. <js>/static/js/front/global.js</js>
18. <js>/static/js/front/search.js</js>
20. </group>
24. <group name="Custom">
26. <css>/static/css/front.css</css>
28. <css>/static/css/comment/comment.css</css>
30. <css>/static/plugins/syntaxhighlighter/shcore.css</css>
32. <js>/static/js/front/coding.js</js>
34. </group>
38. </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

2. <filter>
4. <filter-name>webresourceoptimizer</filter-name>
6. <filter-class>
8. Ro.isdc.wro.http.WroFilter
10. </filter-class>
12. <init-param>
14. <param-name>Debug</param-name>
16. <param-value>true</param-value>
18. </init-param>
20. <init-param>
22. <param-name>disableCache</param-name>
24. <param-value>true</param-value>
26. </init-param>
28. <!--<init-param> <param-name>gzipResources</param-name> <param-value>false</ Param-value>
30. </init-param> <init-param> <param-name>cacheUpdatePeriod</param-name> <param-value> 1</param-value>
32. </init-param> <init-param> <param-name>modelUpdatePeriod</param-name> <param-value> 1</param-value>
34. </init-param> <init-param> <param-name>minimizeEnabled</param-name> <param-value> True</param-value>
36. </init-param>
38. </filter>
40. <filter-mapping>
42. <filter-name>webresourceoptimizer</filter-name>
44. <url-pattern>/static/*</url-pattern>
46. </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