Nodejs 压缩html的库有没有？

Nodejs 压缩html的库有没有？

有没有去除html空白的库，减少生成的html页面体积用

8 回复

有没有去除html空白的库，减少生成的html页面体积用


额 可以先试试：

  1. 使用tab来进行缩进 而不是两个空格或者四个
  2. 尽量减少文档树的层数，这么做 也有利于html和css的布局优雅

当然可以。Node.js 社区中有许多库可以帮助你压缩 HTML 页面，以减少其体积并提高加载速度。其中一个非常流行的库是 html-minifier。它不仅可以去除多余的空白字符，还可以进行其他优化，如删除不必要的标签和属性。

以下是一个简单的示例，展示如何使用 html-minifier 库来压缩 HTML 文件：

安装 html-minifier

首先，你需要安装 html-minifier 库。你可以通过 npm（Node 包管理器）来安装它：

npm install html-minifier --save

使用 html-minifier 压缩 HTML

接下来，你可以编写一个简单的 Node.js 脚本来使用 html-minifier 压缩 HTML 文件。以下是一个示例脚本：

const fs = require('fs');
const htmlMinifier = require('html-minifier');

// 读取原始 HTML 文件
const originalHtml = fs.readFileSync('./input.html', 'utf-8');

// 配置 html-minifier 的选项
const options = {
    removeComments: true, // 删除注释
    collapseWhitespace: true, // 折叠空白字符
    minifyCSS: true, // 压缩内联 CSS
    minifyJS: true, // 压缩内联 JS
};

// 压缩 HTML
const minifiedHtml = htmlMinifier.minify(originalHtml, options);

// 将压缩后的 HTML 写入文件
fs.writeFileSync('./output.html', minifiedHtml);

解释

  1. 引入必要的模块：

    • fs 模块用于读写文件。
    • html-minifier 模块用于压缩 HTML。

  2. 读取原始 HTML 文件：

    • 使用 fs.readFileSync 方法从文件系统中读取原始 HTML 文件的内容。

  3. 配置压缩选项：

    • removeComments: 删除 HTML 中的所有注释。
    • collapseWhitespace: 折叠所有空白字符，包括空格、换行符等。
    • minifyCSS: 压缩 HTML 中的内联 CSS。
    • minifyJS: 压缩 HTML 中的内联 JavaScript。

  4. 压缩 HTML：

    • 使用 htmlMinifier.minify 方法根据配置选项压缩 HTML。

  5. 写入压缩后的 HTML 文件：

    • 使用 fs.writeFileSync 方法将压缩后的 HTML 写入新的文件中。

通过这种方式，你可以轻松地压缩 HTML 文件，从而减少其体积并提升网页的加载性能。

gzip后没多大差别了吧？

我来推荐把，html-minifier 欢迎关注我们node的微博 ，我们会时常分享一些node工具包

[@yaochun](/user/yaochun) 有没有更好的，这个库在html代码写错时，cpu使用会爆长

html-minifier 不可以在元素属性上使用{%%}这类模板语言，比较坑啊

当然有可以压缩 HTML 的 Node.js 库。一个常用的库是 html-minifier，它可以用来压缩 HTML、CSS 和 JavaScript 代码，从而减小文件大小。

示例代码

首先，你需要安装 html-minifier：

npm install html-minifier --save

然后，你可以使用以下代码来压缩 HTML 文件：

const htmlMinifier = require('html-minifier');

const minifiedHtml = htmlMinifier.minify(`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a test paragraph.</p>
</body>
</html>
`, {
    removeComments: true,              // 移除注释
    collapseWhitespace: true,         // 折叠空白区域（包括换行符）
    minifyCSS: true                    // 压缩内联 CSS
});

console.log(minifiedHtml);

这段代码会输出压缩后的 HTML 字符串：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>Hello World!</h1><p>This is a test paragraph.</p></body></html>

解释

  • removeComments: true: 这个选项会移除 HTML 中的所有注释。
  • collapseWhitespace: true: 这个选项会折叠所有多余的空白字符（包括空格、制表符、换行符等）。
  • minifyCSS: true: 如果 HTML 中包含内联样式，这个选项会压缩这些内联样式。

通过这种方式，你可以显著减少 HTML 文件的大小，提高页面加载速度。

回到顶部