做项目用到extjs4.0框架,但是引入的js,css文件太多而且大,特别是ext-all.js,1.2M,网页初始化时候非常缓慢而且消耗带宽,因为用到的服务器是tomecat,最后研究使用配置tomecat的gzip来对请求文件进行压缩,配置步骤如下:
1:找到tomecat的conf下面的server.xml文件,打开,找到
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
2:在该标签里面添加属性
compression="on"
compressionMinSize="2048"
noCompressionUserAgents="gozilla, traviata"
compressableMimeType="text/html,application/xml,application/javascript,text/css,application/json,image/png,image/gif,image/jpg"
注意:compressableMimeType里的值就是要求tomecat进行压缩的文件,比如application/javascrip指对发布的js文件进行压缩,其他文件压缩可以在conf里的web.xml中找到,如
<mime-mapping>
<extension>css</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
告诉我们如何配置css的压缩。
也许我们会好奇,ext-all.js不是已经被压缩过的js了吗,已经没有了注释和空格,为什么还可以继续压缩?比如gzip压缩,可以修改变量名称,尽可能的去用最少的字符去定义,这样也可以大大减少字符数量。
如何检查压缩生效呢?比如用firefox的firedebug,截图如下
压缩前的请求:
压缩后:
通过比较我们发现,js文件和css文件大小明显有变化