SquishIt——JavaScript、CSS压缩器
一段事件木有更新博客了,主要是这段时间工作略忙,业余时间又在帮个朋友做个小东西,于是也就没去接触新东西。今天上网的时候一个老同事(我刚出来工作时的师傅^_^)发来个网址,说是有好东西叫我看,于是看了一下,果然发现了好东西,也解决了之前我在思考的一个小问题。是一个C#.NET的组件来的,由于资料是E文的,按照惯例似懂非懂地看完然后写点测试DEMO。这篇文章记录一下学习成果,其实挺简单- -!
首先看下去哪里拿这个组件,请 点击这里 跳转到组件的下载地址......在我发这篇文章的时候最新的版本是0.7.0,所以果断下载这个版本!是个压缩包,解压后可以看到里面的东西如下(指针选中的那个东东就是我们要的组件了):
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210348472105.jpg)
接下来我们创建一个web项目来测试之,这里我用vs2010创建了一个asp.net4.0的web项目,看一下我们需要用到的东西:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210354002105.jpg)
这里我用到了两个js文件和两个css文件,其中的jquery-1.4.1.js和Site.css是创建项目的时候自动生成的,这两个文件里面的内容都是没有结果压缩的,现在把文件应用到页面上来(这里我选择在母板Site.master里面做),引入的代码相当简单,如下:
接下来运行网站,访问Default.aspx页面(这个页面使用了母板Site.master),在页面加载完成之后我们来看下页面加载了多大的脚本和样式表,我使用的是chrome,截图如下:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210411065136.jpg)
对于我们需要关注的地方我用红色线框框出来了!可以算出这四个文件一共是169k多一点。
这回换成用SquishIt来引入js和css文件,首先要把SquishIt.Framework.dll引入到项目中来(在解决方案窗口的项目头那里右键-添加引用......),接着把上面母板中那四个标签去掉,然后换成下面的代码来引入文件:
上面的代码已经相当明白了,语法什么的就不说了,重新访问页面,会发现脚本和样式表都正常工作,在chrome的调试工具中我们发现文件的大小还是没有改变。到这里这个组件只完成了引入js和css文件的功能,重点的是压缩功能啊!于是修改代码如下:
这次我们要关注的不仅仅是文件的大小了,还有文件名,截图如下:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/20110321042116153.jpg)
可以看到只看到一个js文件和css文件,并且文件的大小还小了很多,这就是这个组件的压缩功能了!打开页面的源代码,可以看到这两个文件,文件名有点奇怪- -!对比一下我们发现有如下的改进:
首先看下去哪里拿这个组件,请 点击这里 跳转到组件的下载地址......在我发这篇文章的时候最新的版本是0.7.0,所以果断下载这个版本!是个压缩包,解压后可以看到里面的东西如下(指针选中的那个东东就是我们要的组件了):
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210348472105.jpg)
接下来我们创建一个web项目来测试之,这里我用vs2010创建了一个asp.net4.0的web项目,看一下我们需要用到的东西:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210354002105.jpg)
这里我用到了两个js文件和两个css文件,其中的jquery-1.4.1.js和Site.css是创建项目的时候自动生成的,这两个文件里面的内容都是没有结果压缩的,现在把文件应用到页面上来(这里我选择在母板Site.master里面做),引入的代码相当简单,如下:
html代码
1
2
3
4
|
< link href = "Styles/Site.css" rel = "stylesheet" type = "text/css" /> < link href = "Styles/StyleSheet.css" rel = "stylesheet" type = "text/css" /> < script src = "Scripts/JScript.js" type = "text/javascript" ></ script > < script src = "Scripts/jquery-1.4.1.js" type = "text/javascript" ></ script > |
接下来运行网站,访问Default.aspx页面(这个页面使用了母板Site.master),在页面加载完成之后我们来看下页面加载了多大的脚本和样式表,我使用的是chrome,截图如下:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/201103210411065136.jpg)
对于我们需要关注的地方我用红色线框框出来了!可以算出这四个文件一共是169k多一点。
这回换成用SquishIt来引入js和css文件,首先要把SquishIt.Framework.dll引入到项目中来(在解决方案窗口的项目头那里右键-添加引用......),接着把上面母板中那四个标签去掉,然后换成下面的代码来引入文件:
c#代码
1
2
3
4
5
6
7
8
9
10
11
12
|
<%= SquishIt.Framework.Bundle.Css() .Add( "~/Styles/Site.css" ) .Add( "~/Styles/StyleSheet.css" ) .Render( "~/Styles/tiu_#.css" ) %> <%= SquishIt.Framework.Bundle.JavaScript() .Add( "~/Scripts/jquery-1.4.1.js" ) .Add( "~/Scripts/JScript.js" ) .Render( "~/Styles/tiu_#.js" ) %> |
c#代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<%= SquishIt.Framework.Bundle.Css() .Add( "~/Styles/Site.css" ) .Add( "~/Styles/StyleSheet.css" ) .ForceRelease() .Render( "~/Styles/tiu_#.css" ) %> <%= SquishIt.Framework.Bundle.JavaScript() .Add( "~/Scripts/jquery-1.4.1.js" ) .Add( "~/Scripts/JScript.js" ) .ForceRelease() .Render( "~/Styles/tiu_#.js" ) %> |
这次我们要关注的不仅仅是文件的大小了,还有文件名,截图如下:
![](http://www.youguanbumen.net/Fiels/Articles/month_1103/20110321042116153.jpg)
可以看到只看到一个js文件和css文件,并且文件的大小还小了很多,这就是这个组件的压缩功能了!打开页面的源代码,可以看到这两个文件,文件名有点奇怪- -!对比一下我们发现有如下的改进:
- 这两个文件的大小合起来是74.28k,记得上面那四个文件么,169k,可以发现压缩后大小连一半都不到;
- 四个文件变成两个,也就是说向服务器请求的次数少了一半;
这篇文章只是简单记录一下组件的使用,至于一些细节就不介绍了,再琢磨一下然后看写成另外一篇文章^_^。使用这个组件我们可以按照我们的代码编写风格写出好看的代码,但是在使用js或者css的时候又不必为文件压缩发愁,更重要的是不必维护两个版本的代码(有压缩和无压缩),这就是文章开头我提及的“解决了之前我在思考的一个小问题”!
DEMO极其简单,但也还是把源代码发上来感觉比较完整,有需要的话请 点击下载
同事发给我的网站地址是这个:http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher
原文链接:http://www.cnblogs.com/serafin/archive/2011/03/21/1990628.html
posted on 2011-03-21 22:49 dragonstreak_1 阅读(335) 评论(0) 编辑 收藏 举报