用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。

来源：https://www.cnblogs.com/wintersun/archive/2012/05/29/2524092.html

标签

css

bundle

css样式