Gzip Static Compression + dynamic compression for the ultimate speed-up of web system JS and CSS files

First, repost a static method.

In the web system, a large number of JavaScript and CSS files are inevitably used, such as open-source JavaScript frameworks prototype, jquery, extjs-core, and so on. These JS frameworks have hundreds of KB, I have done many projects and used a lot of Js. In particular, extjs has powerful functions, but is also the largest JS framework. It is easy for your system to reflect slowly when you are using it. To increase the download speed of JS and CSS files, increase the page response speed, and reduce the file size is the ultimate path. Many JS compression tools are available to reduce the size of these files ,. Here, Gzip static compression technology is reintroduced because it has been proven to be feasible, efficient, and low-risk in the project.

If JavaScript compression tools are used to compress JS and CSS files, there will be many problems. To solve these problems, a lot of human resources must be paid. Because some old projects, or some web systems that are only used in IE, there are many irregularities when writing JS Code, for example, if you forget to enter the ";" after the statement, ie can pass, but some other browsers do not recognize it; after JavaScript compression, it will lead to failure even in IE. To solve these JS compression problems, strict tests are required, and it is often difficult to find out where the specific errors are. In the end, it may take a lot of time to correct errors. However, Gzip static compression technology does not solve these problems, and the compression ratio is much higher than JS compression. The only concern is whether the browser supports gzip. Currently, browsers fully support gzip technology (such as Microsoft's IE, Firefox, Apple's Safari, Google's chrome), so you don't have to worry about it. Here is a little special, that is, Microsoft's ie Must Be In ie6sp1 or later versions to support gzip well, and some refined versions of Windows systems, even upgrading to ie6sp1 or IE7 won't support gzip very well. It doesn't matter. Just add a few Microsoft patches for gzip (which will be explained later ). The following are all the details of gzip static compression technology I have used in my actual project. The main methods for gzip static compression in the original web system are as follows: 1. set *. the JS and *. CSS files are compressed and saved to * by using gzip.exe *. jsgz ,*. cssgz file; 2. convert the JS and CSS files referenced in the web system to the jsgz and cssgz files. 3. when the client requests the jsgz and cssgz files, the server sets the header through the filter and adds the Response Header set "header content-encoding = gzip" to all the requests for files ending with jsgz and cssgz. The following describes how to modify the script and related configuration files: 1) convert the web system to the ant script of the web system that uses gzip Static Compression<? XML version = "1.0" encoding = "UTF-8"?> <Project name = "gzipcode" basedir = "." default = "rebuild"> <! -- Reference ant extension package --> <taskdef resource = "net/SF/antcontrib/antlib. xml"/> <! -- Web system name (directory name) --> <property name = "app. Name" value = "MyApp"/> <! -- Directory of the Web System (current directory) --> <property name = "Web. dir" value = "."/> <! -- Path configuration after System Reconstruction --> <property name = "build. dir "value =" $ {web. dir}/rebuild "/> <target name =" clean "Description =" clean "> <Delete dir =" $ {build. dir} "/> </Target> <target name =" rebuild "depends =" clean "Description =" re-build project "> <copy todir =" $ {build. dir}/$ {app. name} "> <fileset dir =" $ {web. dir} "> <include name = "**/*. * "/> </fileset> </copy> <gzipjscss dir =" $ {build. dir}/$ {app. name} "/> <replacejscssimport dir =" $ {build. dir}/$ {App. name} "/> </Target> <macrodef name =" gzipjscss "> <attribute name =" dir "/> <sequential> <for Param =" file "> <path> <fileset dir = "@ {dir}"> <include name = "**/*. JS "/> <include name = "**/*. CSS "/> </fileset> </path> <sequential> <gzip src =" @ {file} "destfile =" @ {file} GZ "/> </sequential> </For> </sequential> </macrodef> <macrodef name = "replacejscssimport"> <attribute name = "dir"/> <sequential> <! -- Modify the reference to the JS file ". jsgz "--> <replace dir =" @ {dir} "encoding =" UTF-8 "> <include name = "**/*. JSP "/> <include name = "**/*. html "/> <include name = "**/*. htm "/> <replacefilter token = ". JS & quot; "value = ". jsgz & quot; "/> </replace> <! -- Modify the reference to the CSS file ". cssgz "--> <replace dir =" @ {dir} "encoding =" UTF-8 "> <include name = "**/*. JSP "/> <include name = "**/*. html "/> <include name = "**/*. htm "/> <replacefilter token = ". CSS & quot; "value = ". cssgz & quot; "/> </replace> </sequential> </macrodef> </Project> 2) modify the Web. xml configuration file<Web-app...> <! -- Declare the GZIP file filter --> <filter-Name> gzipfilefilter </filter-Name> <filter-class> COM. dragon. web. addheaderfilter </filter-class> <init-param> <param-Name> headers </param-Name> <param-value> content-encoding = gzip </param-value> </init-param> </filter> ...... <! -- GZIP file filter configuration --> <filter-mapping> <filter-Name> gzipfilefilter </filter-Name> <URL-pattern> *. jsgz </url-pattern> </filter-mapping> <filter-Name> gzipfilefilter </filter-Name> <URL-pattern> *. cssgz </url-pattern> </filter-mapping> ...... </Web-app...> 3) source code of the filterPackage COM. dragon. web; import Java. io. ioexception; import Java. util. hashmap; import Java. util. iterator; import Java. util. map; import javax. servlet. filter; import javax. servlet. filterchain; import javax. servlet. filterconfig; import javax. servlet. servletexception; import javax. servlet. servletrequest; import javax. servlet. servletresponse; import javax. servlet. HTTP. httpservletrequest; import javax. servlet. HTTP. httpservletresponse;/*** add an extra header filter to the request file * @ author dragon rongjih@163.com * @ since 2009-01-08 */public class addheaderfilter implements filter {map headers = new hashmap (); public void Init (filterconfig config) throws servletexception {// obtain the headerstring headersstr = config for the additional configuration. getinitparameter ("headers"); string [] headers = headersstr. split (","); For (INT I = 0; I HTTP {include mime. types; default_type application/octet-stream; server_tokens off; # disable nginx software version # log_format main '$ remote_addr-$ remote_user [$ time_local] "$ request"' # '$ Status $ body_bytes_sent "$ http_referer "'#'" $ http_user_agent "" $ http_x_forwarded_for "'; # access_log logs/access. log main; sendfile on; # tcp_nopush on; # keepalive_timeout 0; keepalive_timeout 65; gzip on; gzip_min_length 1000; gzip_buffers 4 8 K; gzip_comp_level 9; #0-9 The default value is 1. The larger the value, the higher the compression ratio, the more CPU resources consumed, and the smaller the transmission volume. Gzip_types text/plain text/CSS application/JSON application/X-JavaScript text/XML application/XML + RSS text/JavaScript; ### nginx do not 80 port forwarding server {Listen 82; SERVER_NAME localhost; Location/{proxy_pass http: // 127.0.0.1: 7001; proxy_set_headerhost $ HOST: 82; proxy_set_headerX-Real-IP $ remote_addr; proxy_set_headerX-Forwarded-For $ proxy_add_x_forwarded_for; proxy_set_header via "nginx ";}}}