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.
- <dependency>
- <groupId>ro.isdc.wro4j</groupId>
- <artifactId>wro4j-core</artifactId>
- <version>1.6.2</version>
- </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:
- <? XML version="1.0" encoding="UTF-8"?>
- <groups xmlns="Http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/ 2001/xmlschema-instance "
- xsi:schemalocation="Http://www.isdc.ro/wro wro.xsd">
- <group name="Basic">
- <css>/static/css/front.css</css>
- <js>/static/js/jquery.js</js>
- <js>/static/js/jquery.paging.min.js</js>
- <js>/static/js/front/global.js</js>
- <js>/static/js/front/search.js</js>
- </group>
- <group name="Custom">
- <css>/static/css/front.css</css>
- <css>/static/css/comment/comment.css</css>
- <css>/static/plugins/syntaxhighlighter/shcore.css</css>
- <js>/static/js/front/coding.js</js>
- </group>
- </groups>
3. Introduce the merged JS, CSS in the View page. Details see how the everycoding.com site is introduced
- <link href= "/static/css/basic.css?minimize=false&v=1433678168807" rel=" Stylesheet ">
- <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
- <filter>
- <filter-name>webresourceoptimizer</filter-name>
- <filter-class>
- Ro.isdc.wro.http.WroFilter
- </filter-class>
- <init-param>
- <param-name>Debug</param-name>
- <param-value>true</param-value>
- </init-param>
- <init-param>
- <param-name>disableCache</param-name>
- <param-value>true</param-value>
- </init-param>
- <!--<init-param> <param-name>gzipResources</param-name> <param-value>false</ Param-value>
- </init-param> <init-param> <param-name>cacheUpdatePeriod</param-name> <param-value> 1</param-value>
- </init-param> <init-param> <param-name>modelUpdatePeriod</param-name> <param-value> 1</param-value>
- </init-param> <init-param> <param-name>minimizeEnabled</param-name> <param-value> True</param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>webresourceoptimizer</filter-name>
- <url-pattern>/static/*</url-pattern>
- </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