📌  相关文章
📜  express minify html - Javascript (1)

📅  最后修改于: 2023-12-03 15:00:40.205000             🧑  作者: Mango

Express Minify HTML with JavaScript

If your website is slow to load, one of the reasons might be excessive use of HTML comments, spaces, and other characters that can be safely removed without altering the content. Express Minify HTML is a middleware for Node.js-based web applications that can help you achieve smaller, faster HTML files.

Setup

To install Express Minify HTML, run this command:

$ npm install express-minify-html

Then, in your Node.js script, add the following line:

const minifyHTML = require('express-minify-html');
Usage

Add the middleware to your Express app:

app.use(minifyHTML({
  override:      true,
  exception_url: false,
  htmlMinifier: {
    removeComments:            true,
    collapseWhitespace:        true,
    collapseBooleanAttributes: true,
    removeAttributeQuotes:     true,
    removeEmptyAttributes:     true,
    minifyJS:                  true
  }
}));

Here's what each option means:

  • override (Boolean, default true): Whether to override the default res.write and res.end functions. If set to false, your application code must manually call res.minify() to minify the response HTML.
  • exception_url (Boolean or string, default false): When testing your application, you can set this option to true to disable minification for requests to URLs containing the string "exception_url". Alternatively, you can set a custom string to match against specific URLs.
  • htmlMinifier (Object, defaults shown in example above): Options to pass to the html-minifier library, used to perform the actual HTML minification. The above options instruct it to remove all comments, collapse whitespace inside tags, strip quotes from boolean attributes, and remove pointless attributes.

That's it! Now every HTML response from your middleware stack will be minified automatically.

Testing

To test if the middleware is doing its job, you can run a simple benchmark like this:

app.get('/test', function(req, res) {
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Test page</title>
        </head>
        <body>
            <div class="container">
                <h1>Hello, world!</h1>
                <p>This is a test page.</p>
            </div>
        </body>
        </html>
    `);
});

Then, measure the response size before and after enabling the minification middleware:

$ curl -s http://localhost:3000/test | wc -c
166
$ curl -sH 'Accept-Encoding: gzip' http://localhost:3000/test | gunzip | wc -c
126

As you can see, the minification process reduced the HTML size from 166 bytes to 126 bytes (24% reduction), which is not bad for such a simple page. For more complex pages or over slower connections, the benefits of minification can be much greater.

Conclusion

Express Minify HTML is a simple and effective way to optimize your web app's HTML files and improve its performance. By removing unnecessary characters and applying compression, you can make your pages load faster and consume less bandwidth, resulting in a better user experience.