您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> ASP.NET 基礎

ASP.NET 效能優化：JS/CSS 合併壓縮與快取 HttpHandler 實作

編輯：ASP.NET 基礎

優化目標

**減少 HTTP 請求數**：將多個 JS/CSS 合併為單一請求。
**減少傳輸體積**：移除空白、註解、縮短變數名 (Minify)。
**善用瀏覽器快取**：ETag、Last-Modified、Cache-Control、Expires 標頭。

架構設計

建立 `IHttpHandler` (`CombineFiles.ashx`)，接收 `type=js|css` 參數。
讀取指定目錄下所有對應副檔名檔案，內容合併。
使用 **Yahoo YUI Compressor for .NET** (`NuGet: Yahoo.Yui.Compressor`) 進行 Minify。
結果存入 `HttpRuntime.Cache` (伺服器端快取)，設定過期時間。
支援條件式請求 (`If-Modified-Since` / `ETag`)，返回 `304 Not Modified`。
輸出正確 `Content-Type` 並設定客戶端快取標頭。

核心 Handler 代碼

using System;
using System.IO;
using System.Text;
using System.Web;
using System.Web.Caching;
using Yahoo.Yui.Compressor;

public class CombineFiles : IHttpHandler
{
    private const string CacheKeyFormat = "_CombineCache_{0}_";
    private const bool EnableCompress = true;

    public bool IsReusable => false;

    public void ProcessRequest(HttpContext context)
    {
        var request = context.Request;
        var response = context.Response;

        string type = request.QueryString["type"]; // "js" 或 "css"
        if (string.IsNullOrEmpty(type) || (type != "js" && type != "css"))
        {
            response.StatusCode = 400;
            response.End();
            return;
        }

        // 設定正確 MIME
        response.ContentType = type == "js" ? "application/javascript" : "text/css";

        string cacheKey = string.Format(CacheKeyFormat, type);
        var cacheItem = HttpRuntime.Cache[cacheKey] as CacheItem;

        if (cacheItem == null)
        {
            // 首次建立：掃描目錄、合併、壓縮
            string dirPath = context.Server.MapPath(type == "js" ? "~/Scripts" : "~/Content");
            if (!Directory.Exists(dirPath))
            {
                response.StatusCode = 404;
                response.End();
                return;
            }

            var sb = new StringBuilder();
            foreach (string file in Directory.GetFiles(dirPath, "*." + type, SearchOption.TopDirectoryOnly))
            {
                string content = File.ReadAllText(file, Encoding.UTF8);
                sb.AppendLine(content);
            }

            string combined = sb.ToString();

            // 壓縮
            if (EnableCompress)
            {
                if (type == "js")
                    combined = JavaScriptCompressor.Compress(combined);
                else
                    combined = CssCompressor.Compress(combined);
            }

            var expires = DateTime.Now.AddDays(30);
            cacheItem = new CacheItem { Content = combined, Expires = expires, Type = type };
            HttpRuntime.Cache.Insert(cacheKey, cacheItem, null, expires, Cache.NoSlidingExpiration);
        }

        // 條件式請求支援
        string ifModifiedSince = request.Headers["If-Modified-Since"];
        if (!string.IsNullOrEmpty(ifModifiedSince) &&
            DateTime.TryParse(ifModifiedSince, out DateTime clientDate) &&
            cacheItem.Expires <= clientDate)
        {
            response.StatusCode = 304;
            response.StatusDescription = "Not Modified";
            response.End();
            return;
        }

        // 輸出內容
        response.Write(cacheItem.Content);
        SetClientCaching(response, cacheItem.Expires);
    }

    private void SetClientCaching(HttpResponse response, DateTime expires)
    {
        response.Cache.SetETag(DateTime.Now.Ticks.ToString());
        response.Cache.SetLastModified(DateTime.Now);
        response.Cache.SetCacheability(HttpCacheability.Public);
        response.Cache.SetMaxAge(TimeSpan.FromDays(30));
        response.Cache.SetSlidingExpiration(true);
        response.Cache.SetExpires(expires);
    }

    private class CacheItem
    {
        public string Type { get; set; }
        public string Content { get; set; }
        public DateTime Expires { get; set; }
    }
}

Web.config 註冊 (IIS 7+ Integrated Mode)

<system.webServer>
  <handlers>
    <add name="CombineFiles" verb="GET" path="CombineFiles.axd" type="YourNamespace.CombineFiles, YourAssembly" preCondition="integratedMode" />
  </handlers>
</system.webServer>

前端引用方式

<!-- 頁面頭部 -->
<link rel="stylesheet" href="/CombineFiles.axd?type=css" />

<!-- 頁面底部 -->
<script src="/CombineFiles.axd?type=js"></script>

進階優化建議

優化點	說明	實作提示
檔案排序/依賴管理	jQuery 必須在插件前載入	維護 `manifest.json` 列出載入順序，Handler 依序讀取
版本指紋	部署新版需刷新客戶端快取	URL 加入 `?v=20240115` 或路徑包含 hash `/CombineFiles.axd?v=abc123`
GZIP/Br 壓縮	傳輸再壓縮 70%+	IIS 動態壓縮模組自動處理，或 Handler 手動 `GZipStream`
CDN 整合	靜態資源卸載至 CDN	Handler 僅處理專案私有資源，第三方庫走 CDN
Source Map	除錯時對應原始碼	YUI Compressor 可輸出 `.map`，開發環境關閉壓縮
非同步載入	不阻塞頁面渲染	` 上一篇文章： ASP.NET 跨瀏覽器相容：加入我的最愛與設為首頁 JavaScript 完整代碼下一篇文章： .NET 多執行緒程式設計實戰總結：前景/背景執行緒、同步鎖、委派本質 ASP.NET 基礎 .NET 內建庫生成 ZIP 檔案的完整實作指南 .NET Framework 內建的 System.IO.P .NET jQuery 表單設計器開源實戰：拖曳建模、JSON 序列化與 MVC 後端整合打造一個「所見即所得」的視覺化表單設計器，是許多企業級應用的 ASP.NET 效能優化系列：善用 Cache-Control 與 Last-Modified 徹底減少 HTTP 請求瀏覽器快取是前端效能優化的關鍵。本文詳細說明如何在 IIS ASP.NET 檔案讀寫鎖機制深度解析：FileShare 列舉完整實驗前言「檔案正由另一處理程序使用，無法存取」是 .NET 檔 ASP.NET 狀態管理完整指南：Application、Session、Cookie、Cache、ViewState 深度比較 ASP.NET DataGrid 新增統計總計列：ItemDataBound 事件實作完整教學 ExtAspNet (Ext.NET) GridPanel 常用功能速查 WPF 實作音訊檔案循環順序播放完整方案 .NET 程式啟動預設執行緒數解析：至少 3 條，更多視情況而定 ASP.NET 實現拼音碼模糊查詢：批次產生與查詢應用 ASP.NET GridView 批次刪除功能實作教學（上）欄目導航 ASP.NET 基礎關於ASP.NET Copyright © 程式碼之家 All Rights Reserved