.Net 好用的 SquishIt 網頁檔案 優化 壓縮 CSS 及 JS (網頁優化) .Net 好用的 SquishIt 網頁檔案 優化 壓縮 CSS 及 JS (網頁優化)
  .NET       ez      2012-08-28

.Net 可以使用 SquishIt 進行 CSS 及 JS 組合並壓縮,首先必須先下載檔案。

官方網址:http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

本站下載:jetheredge-SquishIt-d9184c7

以往寫網頁會加入一堆 CSS 及 JS 如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/a.css" rel="stylesheet" type="text/css" />
    <link href="CSS/b.css" rel="stylesheet" type="text/css" />
    <link href="CSS/c.css" rel="stylesheet" type="text/css" />
    <link href="CSS/d.css" rel="stylesheet" type="text/css" />
    <link href="CSS/e.css" rel="stylesheet" type="text/css" />
    <script src="JS/a.js" type="text/javascript"></script>
    <script src="JS/b.js" type="text/javascript"></script>
    <script src="JS/c.js" type="text/javascript"></script>
    <script src="JS/d.js" type="text/javascript"></script>
    <script src="JS/e.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

當網頁讀取時需要載入多個 CSS 及 JS,這樣需要浪費較多的 Request 及頻寬,如下圖:

11次Request,約 295KB

以下為採用 SquishIt 方式:

首先必須參考 SquishIt.Framework

並且將 HTML 改為以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%= SquishIt.Framework.Bundle.Css()
        .Add("~/CSS/a.css")
        .Add("~/CSS/b.css")
        .Add("~/CSS/c.css")
        .Add("~/CSS/d.css")
        .Add("~/CSS/e.css")
        .ForceRelease()
        .Render("~/CSS/combined#.css")
    %>
    <%= SquishIt.Framework.Bundle.JavaScript()
        .Add("~/JS/a.js")
        .Add("~/JS/b.js")
        .Add("~/JS/c.js")
        .Add("~/JS/d.js")
        .Add("~/JS/e.js")
        .ForceRelease()
        .Render("~/JS/combined#.js")
    %>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

此時就會透過 SquishIt 將 CSS 及 JS 進行組合並且壓縮,如下圖:

SquishIt 會將組合後的 CSS 或 JS 存在您指定的目錄內,如果 CSS 或 JS 變化組合檔案也會增加,所以要記得定時刪除喔!


標籤:   .NET

我要留言