我这个人一向爱刨根问底,我觉得热爱技术的人都应该是这样吧。于是我直接google找到了作者的最新版本,虽说是最新版本但也是2008年的了,不过这个版本跟以前版本的实现方式有所变化,而且我个人比较喜欢这个方式。仔细拜读了作者的源码后发现了两个Bug,修复之,又添加了文件缓存的功能,现在先分享给大家,明天再带着大家一点一点的分析源码。
使用方式:
1.将我上传的文件里的DC.Web.HttpCompress.dll上传到你的网站bin目录下。
2.如下增加及修改项目的web.config
<configSections> <sectionGroup name="DCWeb"> <section name="HttpCompress" type="DC.Web.HttpCompress.Configuration, DC.Web.HttpCompress"/> </sectionGroup> </configSections> <DCWeb> <HttpCompress compressionType="GZip"> <IncludedMimeTypes> <add mime="text/html"/> </IncludedMimeTypes> </HttpCompress> </DCWeb> <system.web> <httpHandlers> <add verb="*" path="js.axd,css.axd" type="DC.Web.HttpCompress.CompressionHandler,DC.Web.HttpCompress"/> <!-- 将想要缓存的图像类型填入path,逗号分隔,例如 *.gif,*.png --> <add verb="*" path="*.gif" type="DC.Web.HttpCompress.ImageHandler,DC.Web.HttpCompress"/> </httpHandlers> <httpModules> <add name="HttpCompressModule" type="DC.Web.HttpCompress.HttpModule,DC.Web.HttpCompress"/> </httpModules> </system.web>
3.这样你的aspx,js,css都会被压缩且被缓存,添加到配置的图像也会被缓存。
4.运行效果对比
测试页面
Default.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/js1/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/js2/jQueryRotateCompressed.2.1.js" type="text/javascript"></script> <script src="js/js3/jquery.path.1.0.js" type="text/javascript"></script> <script src="js/js3/jquery.uploadify.v2.1.4.js" type="text/javascript"></script> <script src="js/js4/Test.js" type="text/javascript"></script> </head> <body> <div id="content"> </div> <a href="Test.aspx">跳转</a> </body> </html>
Test.aspx页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/js1/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/js2/jQueryRotateCompressed.2.1.js" type="text/javascript"></script> <script src="js/js3/jquery.path.1.0.js" type="text/javascript"></script> <script src="js/js3/jquery.uploadify.v2.1.4.js" type="text/javascript"></script> <script src="js/js4/Test.js" type="text/javascript"></script> </head> <body> <div id="content"> </div> <a href="Default.aspx">跳转</a> </body> </html>
测试工具google浏览器,添加模块前访问Default.aspx页面
跳转到Test.aspx页面后
可以看出并没有使用cache
增加压缩模块之后访问Default.aspx页面
可以明显看到Jquery库从91.6KB压缩到了37.14KB,而且处于js3文件夹下的2个js文件被合并成了一个,即请求数也减少了一个,同样如果css处于同一文件夹下也会合并请求与文件。再看跳转到Test.aspx页面后
很明显相同的引用直接从cache里取,并没有再次下载。
5.文件下载
猛击此处下载DC.Web.HttpCompress(nosrc).rar(修改增强版) 无源码
6.enjoy yourself!
7.感谢园友 情留メ蚊子 提出ckeditor不能使用问题。原因如下
a)
e=f[0]*10000+(f[1]||0)*100+ +(f[2]||0);}
中间的空格会被去掉。。。。变成
e=f[0]*10000+(f[1]||0)*100++(f[2]||0);}自然就错了
改为f[0]*10000+(f[1]||0)*100+(f[2]||0);}(已在压缩中修正)
b)
var x = 'editor' + ++l;
同理。。。
改为
var x = 'editor' + (++l);(已在压缩中修正)
c)
aria-posinset="' + ++r._.size
同理
改为
aria-posinset="' + (++r._.size);(已在压缩中修正)
d)
var g=e[f].src.match(/(^|.*[\\\/])ckeditor(?:_basic)?(?:_source)?.js(?:\?.*)?$/i);
正则判断不出现在的文件路径
改为
var g=e[f].src.match(/(^|.*[\\\/])(?:js\.axd\?files=)ckeditor(?:_basic)?(?:_source)?.js(?:\?.*)?$/i);(这个必须改!!)
ok,搞定,使用ckeditor版本3.62
点击此处下载配合压缩模块使用的ckeditor版本 猛击此处下载修改版ckeditor
8.更新日志
2011.12.19
修复 由++或--引起的js脚本压缩错误