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