怎样用 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]文件，并且可以设置在文件保存时自动重新压缩。