JavaScript的gzip静态压缩方法记录

时间 2019-11-16

标签 javascript gzip 静态压缩方法记录栏目 JavaScript 繁體版

原文原文链接

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时仍是不尽不意,幸好如今的浏览器都支持压缩传输(经过设置http header的Content-Encoding=gzip),能够经过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力

如今的问题是这种动态的压缩会致使服务器CPU占用率太高,如今我想到的解决辨法是经过提供静态压缩(就是将js预先经过gzip.exe压缩好)

一.下面描述在tomcat中的应用

1.将prototype.js经过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将全部以gzjs结尾的文件增长设置header Content-Encoding=gzip
web.xml中的配置 javascript

Java代码

<filter>
<filter-name>AddHeaderFilter</filter-name>
<filter-class>
badqiu.web.filter.AddHeaderFilter
</filter-class>
<init-param>
<param-name>headers</param-name>
<param-value>Content-Encoding=gzip</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>AddHeaderFilter</filter-name>
<url-pattern>*.gzjs</url-pattern>
</filter-mapping>

测试prototype.js是否正常的代码 html

Java代码

<html>
<head>
<script src="prototype.gzjs" type="text/javascript"></script>
</head>
<body>
<input id="username" name="username" value="badqiu"/><br />
<input id="email" value="badqiu@gmail.com"/>
<script>
alert($F('username'))
</script>
</body>
</html>

在Apache httpd中能够直接经过在httpd.conf增长AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 经过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接经过gzip压缩为85KB,总压缩率81%
4. 439KB通过js压缩为165KB,再通过gzip压缩为65KB,总压缩率86%

基本上你均可以忽略js压缩工具的压缩率,直接使用gzip压缩

gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rarjava