一般我們如果打造的系統是給企業內部使用的話，走的是 Intranet，大概不會有程式設計師會去在意網路流量，當應用場景搬到了 Internet，流量成為企業經營成本的時候，那可是能省則省，因為在網際網路上大多數的內容，觀看者是沒有直接為這些內容付費的，成本當然能少一點是一點，這篇文章就要來介紹 WebMarkupMin 這個套件，將我們的 HTML 內容做最小化，減少不必要的傳輸流量。
WebMarkupMin Online
在開始用 WebMarkupMin 套件撰寫程式之前，我們可以先將 HTML 內容丟到 WebMarkupMin Online 版，看看最小化成不成功？最小化的結果是不是如我們預期？畢竟 Garbage in garbage out，HTML 格式有問題是有可能無法最小化的。
WebMarkupMin.Core
接下來我們就開始用 WebMarkupMin 套件來撰寫程式，WebMarkupMin.Core 是整個 WebMarkupMin 的核心元件，如果我們只是單純想要將 HTML 內容做最小化，儲存成文字檔或進資料庫內，我們就安裝 WebMarkupMin.Core 就好了，具體的使用方式也很容易，請參考下面的範例程式碼：
internal class Program
{
private static void Main(string[] args)
{
IMarkupMinifier markupMinifier = new HtmlMinifier();
var minificationResult = markupMinifier.Minify(@"
<!DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""utf-8"" />
<meta name=""viewport"" content=""width=device-width, initial-scale=1.0"" />
<title>Home Page - WebMarkupMinLab</title>
<link rel=""stylesheet"" href=""/lib/bootstrap/dist/css/bootstrap.min.css"" />
<link rel=""stylesheet"" href=""/css/site.css"" />
</head>
<body>
<header>
<nav class=""navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"">
<div class=""container"">
<a class=""navbar-brand"" href=""/"">WebMarkupMinLab</a>
<button class=""navbar-toggler"" type=""button"" data-toggle=""collapse"" data-target="".navbar-collapse"" aria-controls=""navbarSupportedContent""
aria-expanded=""false"" aria-label=""Toggle navigation"">
<span class=""navbar-toggler-icon""></span>
</button>
<div class=""navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"">
<ul class=""navbar-nav flex-grow-1"">
<li class=""nav-item"">
<a class=""nav-link text-dark"" href=""/"">Home</a>
</li>
<li class=""nav-item"">
<a class=""nav-link text-dark"" href=""/Home/Privacy"">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class=""container"">
<main role=""main"" class=""pb-3"">
<div class=""text-center"">
<h1 class=""display-4"">Welcome</h1>
<p>Learn about <a href=""https://docs.microsoft.com/aspnet/core"">building Web apps with ASP.NET Core</a>.</p>
</div>
</main>
</div>
<footer class=""border-top footer text-muted"">
<div class=""container"">
© 2020 - WebMarkupMinLab - <a href=""/Home/Privacy"">Privacy</a>
</div>
</footer>
<script src=""/lib/jquery/dist/jquery.min.js""></script>
<script src=""/lib/bootstrap/dist/js/bootstrap.bundle.min.js""></script>
<script src=""/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0""></script>
</body>
</html>");
Console.WriteLine(minificationResult.MinifiedContent);
Console.Read();
}
}
從執行結果我們可以看到，換行符號跟多餘的空格全都被消除了。
WebMarkupMin.AspNetCore3
WebMarkupMin 的開發團隊有為 ASP.NET 製作了一系列的 Extensions，包含了 ASP.NET 4.X HTTP modules、ASP.NET 4.X MVC、ASP.NET 4.X Web Forms、ASP.NET Core 1.X、ASP.NET Core 2.X、ASP.NET Core 3.X，幾乎 ASP.NET 生態系的主流框架都支援，我們這邊只介紹 ASP.NET Core 3.1+ 的使用方法，其他框架的部分就請大家參考 WebMarkupMin 的官方 Wiki。
在 ASP.NET Core 專案上安裝 WebMarkupMin.AspNetCore3 套件之後，就在 Startup.cs 的 ConfigureServices() 及 Configure() 方法中，加入 WebMarkupMin Middleware 設定。
public void ConfigureServices(IServiceCollection services)
{
services.AddWebMarkupMin().AddHtmlMinification();
...
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
...
app.UseWebMarkupMin();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
這樣設定就會 Work 了，最後我挑了我們家一個結構算是簡單、內容不多的頁面來比較前後的差異，即使經過了壓縮，前後還是差了 2KB，這 2KB 看起來不大，但是光這個頁面一個月就有 5,000,000 個 PV（Page View），省下來的流量就有 9.5GB，更不要說其他更熱門、結構更複雜、內容更多的頁面，省下來的流量是很可觀的，這些都是白花花的銀子（雖然是老闆的錢）。
