2012年5月29日星期二

用SquishIt最小化Css与Javascript文件

用SquishIt最小化Css与Javascript文件

       SquishIt 是一个轻易压缩与合并CSS与JavaScript文件的组件。同时它还使用dotless处理css. 它依赖组件是：

Dependencies

Id
Version Range

YUICompressor.NET
(≥ 1.7.0.0)

dotless
(≥ 1.2.2.0)

AjaxMin
(≥ 4.46.4422.26284)

Jurassic
(≥ 2.1.1)

 

不过不用担心，依赖会自动安装的，你可以使用Command-Line安装它。

PM> Install-Package SquishIt -Version 0.8.6

使用起来也很方便。修改web.config其中 debug 为 false 

  <compilation debug="false" targetFramework="4.0">

在Asp.net MVC 3 中的View 可以这么用，最后将生成一个合并前所以有JS的名为combine开头的文件。
   @Html.Raw(Bundle.JavaScript().Add("~/Scripts/jquery-1.5.1.js").Add("~/Scripts/jquery.validate.js").Add("~/Scripts/jquery.validate.unobtrusive.js")        .Render("~/Scripts/combined#.js"))


通过FireBug可以看到只有一个Js的请求，这个文件合并了其它文件。

http://localhost:6060/Scripts/combined4A287FF65BFD05F0B0BC2F292D0C8258.js


对比之前需要3个js的请求，现在只需要一个了，并且还压缩过。
CSS文件可以这样： 

@Html.Raw(Bundle.Css()      .Add("~/Content/Site.css")      .Add("~/Content/RiskSite.css")  .Render("~/Content/combined#.css"))

 

最后页面只请求 http://localhost:6060/Content/combinedCBBF63B8C0EF232103C23C953C336D54.css 

同样这个文件是合并了其它css文件，并压缩了它们。

如果想避免生成这些文件在磁盘上，让它们运行时生成。 以CSS为例，需要做一些扩展。官方已经开始做了，以后会有的。

需要在Global.asax中： 

    protected void Application_Start()    {        AreaRegistration.RegisterAllAreas();        RegisterGlobalFilters(GlobalFilters.Filters);        RegisterRoutes(RouteTable.Routes);        Bundle.Css()    .Add("~/Content/Site.css")    .Add("~/Content/RiskSite.css").AsCached("main","~/Security/Css/main");    }
然后在新建一个BaseController，增加两个Action，类似这样:
public class BaseController : Controller{    public ActionResult Js(string id)    {        // Set max-age to a year from now        Response.Cache.SetMaxAge(TimeSpan.FromDays(365));        // In release, the cache breaker is appended, so always return 304 Not Modified        Response.StatusCode = 304;        return Content(Bundle.JavaScript().RenderCached(id), "text/javascript");    }    public ActionResult Css(string id)    {        // Set max-age to a year from now        Response.Cache.SetMaxAge(TimeSpan.FromDays(365));        // In release, the cache breaker is appended, so always return 304 Not Modified        Response.StatusCode = 304;        return Content(Bundle.Css().RenderCached(id), "text/css");    }}

在实际Controller继承这个BaseController:
public class SecurityController : BaseController {    //...}


接下来在View中，MvcRenderCachedAssetTag方法在SquishIt.Mvc.dll里， 改写为:
 
@Bundle.Css().MvcRenderCachedAssetTag("main")


有兴趣还可写一个Razor扩展,类似的代码像这样


//Rzr.cshtml

@helper Css(string key) {  @Bundle.Css().MvcRenderCachedAssetTag(key)}@helper Js(string key) {  @Bundle.Javascript().MvcRenderCachedAssetTag(key)}// In a view...@Rzr.Css("main")@Rzr.Js("main")

 

完了，然后运行页面：

http://localhost:6060/security/LoginWithModel
 
在Html中，显示：
<link rel="stylesheet" type="text/css" href="/Security/Css/main?r=CBBF63B8C0EF232103C23C953C336D54" />

这是一个动态生成的Css，完了，就这么简单。您可根据自己的情况修改组件。
希望对您Web开发有帮助。您可以感兴趣的文章:

Asp.net使用HttpHandler优化Css样式文件
Asp.net使用HttpModule压缩并删除空白Html请求
 
 


作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。


TAG:
发帖者 时间：