Minify Html with ActionFilter

การเพิ่มประสิทธิภาพในการทำงานของเว็บเพจมีหลายวิธี หนึ่งในนั้นคือการลบ ช่องว่าง (White-spaces) หรือ Comments ต่างๆ ที่อยู่ในหน้า Html ออกให้หมดเพื่อให้ Request มีขนาดเล็กลง เพื่อช่วยให้การทำงานมีประสิทธิภาพเร็วขึ้น โดยมีหลักการคือกำหนด ActionFilter ทำการตัดช่องว่างและคอมเมนต์ต่างๆออกในจังหวะ OnResultExecuting

เร่มแรกให้สร้าง Class ชื่อ MinifiedStream.cs โดยผมจะตั้งชือ namespace นี้เป็น Web.MVC.Filter ซึ่งจะมี Code ดังนี้

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;

namespace Web.MVC.Filter
{
    public class MinifiedStream : MemoryStream
    {
        private readonly Stream _output;
        private static readonly Regex Whitespace = new Regex(@"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}", RegexOptions.Compiled);
        private static readonly Regex htmlComments = new Regex(@"<!--(.|\\s)*?-->", RegexOptions.Compiled);
        private static readonly Regex cssComments = new Regex(@"/\*.+?\*/", RegexOptions.Compiled);

        public MinifiedStream(Stream stream)
        {
            _output = stream;
        }

        public override void Write(byte[] buffer, int offset, int count)
        {
            var html = Encoding.UTF8.GetString(buffer);
            html = htmlComments.Replace(html, string.Empty);
            html = cssComments.Replace(html, string.Empty);
            html = Whitespace.Replace(html, string.Empty);
            html = html.Trim();
            _output.Write(Encoding.UTF8.GetBytes(html), offset, Encoding.UTF8.GetByteCount(html));

        }
    }
}

ใน Code จะทำงานโดยใช้ Regular Expression ตรวจสอบ Html จาก Buffer เพื่อไปตรวจสอบช่องว่างและ Comments ต่างๆ แล้ว Replace ด้วย String.Empty ในตัวอย่างนี้จะมี Regular Expression 3 ชุด
1. Whitespace - สำหรับลบช่องว่าง กำหนด Regular Expression ดังนี้
- @"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}"
2. htmlComments - สำหรับลบ Comment ใน Html  กำหนด Regular Expression ดังนี้
- @"<!--(.|\\s)*?-->"
3. cssComments - สำหรับลบ Comment ใน Css  กำหนด Regular Expression ดังนี้
- @"/\*.+?\*/"

จากนั้นมาสร้าง Class ชื่อ MinifyHtml.cs เืพื่อสร้าง Action Filtering โดยดังนี้

using System;
using System.Web.Mvc;
using System.Text.RegularExpressions;

namespace Web.MVC.Filter
{
    public class MinifyHtml : ActionFilterAttribute
    {
        public override void OnResultExecuting(ResultExecutingContext filterContext)
        {
            var response = filterContext.HttpContext.Response;
            response.Filter = new MinifiedStream(response.Filter);
        }
    }
}

เท่านี้ก็สามารถสร้าง Action Filtering เพื่อลบ Whitespace , Comments , CSS Comments ที่ไม่จำเป็นออกจากหน้าเว็บ ซึ่งช่วยประสิทธืภาพในการโหลดหน้าเว็บให้เร็วขึ้น

ที่นี้มาลองทดสอบกันดูนะครับว่า Code ทำงานแล้วได้ผลลัพธ์อย่างไร ผมได้ทำการสร้าง View ที่มี Comment และ White Space อยู่เยอะมาก ดังนี้

@{
    ViewBag.Title = "Home Page";
}

<!-- title page -->
<h2>@ViewBag.Message</h2>

<!-- detail -->
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

หลังจากทดสอบ Run ออกมาแล้วจะเห็นว่า Response ที่ได้กลับมาจะไม่มี Whitespace , Comments ดังรูป