SquishIt——JavaScript、CSS压缩器

今天上网的时候一个老同事（我刚出来工作时的师傅^_^）发来个网址，说是有好东西叫我看，于是看了一下，果然发现了好东西，也解决了之前我在思考的一个小问题。是一个C#.NET的组件来的，由于资料是E文的，按照惯例似懂非懂地看完然后写点测试DEMO。这篇文章记录一下学习成果，其实挺简单- -！

    首先看下去哪里拿这个组件，请  点击这里  跳转到组件的下载地址......在我发这篇文章的时候最新的版本是0.7.0，所以果断下载这个版本！是个压缩包，解压后可以看到里面的东西如下（指针选中的那个东东就是我们要的组件了）：
    

    接下来我们创建一个web项目来测试之，这里我用vs2010创建了一个asp.net4.0的web项目，看一下我们需要用到的东西：
    
    这里我用到了两个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，截图如下：

    对于我们需要关注的地方我用 红色线框 框出来了！可以算出这四个文件一共是 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" ) %>

    上面的代码已经相当明白了，语法什么的就不说了，重新访问页面，会发现脚本和样式表都正常工作，在chrome的调试工具中我们发现文件的大小还是没有改变。到这里这个组件只完成了引入js和css文件的功能，重点的是压缩功能啊！于是修改代码如下：

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" ) %>

    
    这次我们要关注的不仅仅是文件的大小了，还有文件名，截图如下：

    可以看到只看到一个js文件和css文件，并且文件的大小还小了很多，这就是这个组件的压缩功能了！打开页面的源代码，可以看到这两个文件，文件名有点奇怪- -！对比一下我们发现有如下的改进：

1. 这两个文件的大小合起来是74.28k，记得上面那四个文件么，169k，可以发现压缩后大小连一半都不到；
2. 四个文件变成两个，也就是说向服务器请求的次数少了一半；

    这篇文章只是简单记录一下组件的使用，至于一些细节就不介绍了，再琢磨一下然后看写成另外一篇文章^_^。使用这个组件我们可以按照我们的代码编写风格写出好看的代码，但是在使用js或者css的时候又不必为文件压缩发愁，更重要的是不必维护两个版本的代码（有压缩和无压缩），这就是文章开头我提及的“解决了之前我在思考的一个小问题”！

    DEMO极其简单，但也还是把源代码发上来感觉比较完整，有需要的话请  点击下载
    同事发给我的网站地址是这个： http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher