.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