怎樣用 JS 壓縮 HTML ？

實現 HTML 壓縮，可以使用 JavaScript 中的正則表達式來去除 HTML 中的空格和注釋。以下是一個簡單的 HTML 壓縮函數：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

該函數首先使用正則表達式去除 HTML 中的注釋。然后，它使用另一個正則表達式去除 HTML 中的多余空格。最后，它使用另一個正則表達式去除標簽之間的空格。

為了測試該函數，您可以創建一個 HTML 文件，并在其中添加一些冗余的空格和注釋。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：

// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);

輸出是一個壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。

或者直接在IE中測試，代碼如下：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

運行效果：

最近真是煩做好了外貿自建站獨立商城還是被打FB廣告的同事K說網站跳出率太高了，一定是網站的問題，雖然不服氣一肚子火但還是偷偷用谷歌的網站測試平臺Think with Google測速了一下，果然嚇一跳如圖

我的網站打開速度慢

從下載的建議報告中提出了很多待解決的問題，其中就包括要壓縮HTML、CSS、JS文件，如果要我一個個的找到這些文件并一個個壓縮完還不被同事K死呀，老板知道了更是不得了。干脆一次解決這個網頁壓縮的問題，于是就干脆搭建自己的網頁壓縮器一次搞定所有HTML、CSS、JS文件，在這里分享給同樣要提高網站打開速度的朋友。

第一步：網頁壓縮器源代碼在本博客文章里面下載，下載完解壓后把文件夾中的minify文件復制，把該文件復制到你的網站程序目錄下如圖所示

網頁壓縮器目錄

第二步：就是進服務器執行這個網頁壓縮器文件minify具體執行代碼取決于你的服務器安裝的操作系統，這里的截圖是舉例，輸入cd網頁保存的目錄，再輸入Chmod 777 ./minify，設置minify的權限。

第三步：非常關鍵的操作，開始壓縮時，輸入“./minify -r -v -o 來源目錄輸出目錄”具體目錄取決于你自己的文件路徑，舉例如圖

設置網頁壓縮器權限

執行的這個網頁壓縮器是不是飛的一樣快，休一下就完成了。

網頁壓縮執行效果

第四步，來檢查一下網頁壓縮效果，看看如圖

網頁壓縮效果

是不是包括所有HTML、CSS、JS文件一次都被壓縮了呀，而且不會導致CSS失效導致的網頁錯位亂碼，真是個超強飛快的網頁壓縮器吧。

就像我在這個跨境電商公司做完那個自建站獨立商城后本來以為大部分工作都做完了后面就是維護小修商城就可以輕松了一下，沒想到實際運行過程中還是很多事情，本著碰到問題解決問題的精神，以后也會在本博客分享自己碰到的實際問題并做分享，對老鳥高手來說是笑掉大牙的，就像這個網頁壓縮器一樣，希望對身為網頁設計的你有幫助吧。

以安裝Minify 插件，Minify 插件可以壓縮js、css和html代碼。會在指定壓縮的文件同目錄下生成{filename}.min.[css|js|html]文件，并且可以設置在文件保存時自動重新壓縮。