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