透過網頁瀏覽器看到的網頁絕大部分是使用HTML進行控制編排的,由於HTML的語法結構定義較為寬鬆,網頁瀏覽器都有一定程度的容錯率,因此有可能某個100KB的HTML實際上可以等價於不到50KB的HTML,也就是說,多出來的資料量是完全不必要的,可是卻會增加更多的網路流量和時間成本。



HTML Minifier

「HTML Minifier」是筆者開發的套件,可以在產生HTML(串接字串)的同時去進行HTML的壓縮,並且支援<style>、<script>以及<pre>與<textarea>標籤的特殊處理。採用的HTML壓縮規則如下:

  • 移除ASCII的控制字元(字元範圍0x00-0x08, 0x11-0x1F, 0x7F)。
  • 移除註解。
  • 移除未使用的空格(包括空白鍵空格、TAB和換行字元)。
  • 壓縮<style>標籤內的CSS語法。
  • 壓縮<script>標籤內的JS語法。
  • 不壓縮<pre>和<textarea>標籤的內容。

Crates.io

https://crates.io/crates/html-minifier

Cargo.toml

html-minifier = "*"

使用方法

使用「use」關鍵字來將「html_minifier」這個crate底下的「HTMLMinifier」結構體給引用到當前的程式範圍下。「HTMLMinifier」結構實體擁有「digest」方法,可以多次傳入要串接至HTML中的字串,最後再使用「get_html」方法回傳已壓縮的HTML。也就是說,使用「HTMLMinifier」時,不需要先把完整的HTML先產生好,再產生出壓縮的HTML。而是可以藉由多次呼叫「HTMLMinifier」結構實體的「digest」方法,來串接字串,直接產生出壓縮的HTML。如此一來可以省下許多處理時所需記憶體,又可以加快所需的時間。

extern crate html_minifier;

use html_minifier::HTMLMinifier;

let mut html_minifier = HTMLMinifier::new();

html_minifier.digest(r#"
                <!DOCTYPE html>
                <html lang=en>
                    <  head>
                        <head  name=viewport  >
                    </head  >
                    <body     class="container    bg-light" >
                        <input type="text" value='123   456'    />
                        <!-- Content -->
                        123456 <b>big</b> 789

                    <  /body>
                </  html>
        "#).unwrap();

assert_eq!(r#"<!DOCTYPE html><html lang=en><head><head name=viewport></head><body class="container bg-light"><input type="text" value='123   456'/>123456 <b>big</b> 789</body></html>"#, html_minifier.get_html());
extern crate html_minifier;

use html_minifier::HTMLMinifier;

let mut html_minifier = HTMLMinifier::new();

html_minifier.digest(r#"<script>
        alert('1234!')    ;

        </script>"#).unwrap();

assert_eq!("<script>alert('1234!')</script>", html_minifier.get_html());
extern crate html_minifier;

use html_minifier::HTMLMinifier;

let mut html_minifier = HTMLMinifier::new();

html_minifier.digest(r#"<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
        </style>"#).unwrap();

assert_eq!("<style>h1{color:blue;font-family:verdana;font-size:300%;}p{color:red;font-family:courier;font-size:160%;}</style>", html_minifier.get_html());