HttpModule 與 HttpHandler 協作實戰：合併壓縮腳本與樣式

前言

頁面引用數十個 JS/CSS 怎麼自動合併且無需人工干預？結合 HttpModule (攔截回應) 與 HttpHandler (處理合併請求) 實現透明合併壓縮。

標記轉換約定

將所有 <script>、<link> 替換為 <resource runat="server">：

<head runat="server">
  <resource src='https://cdn.example.com/js/apiCommon.js' type="text/javascript" runat="server"></resource>
  <resource href='https://cdn.example.com/css/site.css' type="text/css" rel="stylesheet" runat="server" />
</head>

使用者控制項同理。

HttpModule 處理流程

1. Init 註冊 PostRequestHandlerExecute 事件。
2. 事件中檢查回應 Content-Type == text/html。
3. 使用 HtmlAgilityPack 或 Regex 解析 <resource> 標籤，收集 src/href、type。
4. 按類型分組產生合併 URL：/combined.axd?type=js&files=file1.js,file2.js。
5. 替換原 <resource> 為單一 <script>/<link> 指向合併 URL。
6. 啟用 GZIP/Deflate 壓縮 (IIS 設定或程式碼)。

HttpHandler 實作

• 路由 combined.axd 對應 CombinedResourceHandler : IHttpHandler。
• ProcessRequest：解析查詢字串，讀取各檔案內容 (支援 CDN 快取)、依序拼接、設定 Content-Type、輸出。
• 快取策略：ETag、Last-Modified、Cache-Control: public, max-age=31536000。

優勢

• 零修改業務頁面，透過約定標記自動生效。
• 減少 HTTP 請求數，首屏載入顯著提速。
• 支援版本戳查詢字串，解決快取失效。

總結

HttpModule 負責「頁面級重寫」，HttpHandler 負責「資源級合併輸出」，兩者分工協作，構建透明的前端資源優化管線。