HTML Minifier? #6278

ivodolenc · 2022-10-27T20:28:30Z

ivodolenc
Oct 27, 2022

Hi, I just found out about this project through Vercel's new blog post. I had a quick look through the documentation so I hope this question isn't ridiculous :D

Is it possible to minify the html content? Maybe something like this, but for html:

// Example

import { readFileSync, writeFileSync } from 'fs'
import swc from '@swc/core'

let file = 'src/index.html'

let htmlContent = readFileSync(file, 'utf-8')

let minifiedContent = await swc.minify(htmlContent, {
  // options...
})

writeFileSync(file, minifiedContent)

ivodolenc · 2022-10-29T07:11:46Z

ivodolenc
Oct 29, 2022
Author

Hi, thanks for comment.

Sorry if I didn't express myself well, I was thinking if this is possible with swc out of the box, since Next.js 13 will be powered with swc under the hood? 😊

In the new Next.js docs, minification is mentioned as one of the new big features, and also migration from terser.

Nothing about this topic was mentioned in the official swc docs (at least for JavaScript API), but in some PRs and issues it was noted that html minification is supported now so I was hoping I could get more info on that.

2 replies

kdy1 Oct 29, 2022
Maintainer

It's supported, but it's barely documented
@alexander-akait Do you know the way to use @swc/html at now?

alexander-akait Nov 1, 2022

@ivodolenc Hello, yes, here example of usage https://github.com/webpack-contrib/html-minimizer-webpack-plugin/blob/master/src/utils.js#L112, two function:

minify (when you have full HTML document, i.e. with Doctype/head/body)
minifyFragment (i.e. part of HTML, i.e. no Doctype/etc, like you have HTML template in separate file)

Why two? Because spec separates how to parser them. You need to install @swc/html, in future maybe we revisit it and move them to @swc/code, now we keep them separately.

Here repo with @swc/html and @swc/css - https://github.com/swc-project/bindings, feel free to feedback

ivodolenc · 2022-11-01T22:09:32Z

ivodolenc
Nov 1, 2022
Author

@alexander-akait Hi, thanks for all the info and examples, it definitely helped.

Here's an example with which I was partially able to set up the minification, but it seems to automatically remove the <head>, <body> and the final </html> tag.

The rest of the content is minified and works fine in the browser, but is not correct without the removed tags.

Although I think I have set something wrong, here is my example, maybe you have some advice:

// vite-plugin for SvelteKit

import swcHtml from '@swc/html'

{
  return {
    name: 'vite-plugin',

    async closeBundle() {
      // htmlFiles -> array of all .html files in dir

      for (let file of htmlFiles) {
        // open file and get full html content with doctype and everything else
        let fileContent = readFileSync(file, 'utf-8')

        // minify html content
        // not sure about that Buffer.from(), is that set correctly?
        let minifiedContent = await swcHtml.minify(Buffer.from(fileContent))

        // write minified content back to the file
        writeFileSync(file, minifiedContent.code)
      }
    }
  }
}

Also, can't believe that @swc/html is only ~7kb min?? Game-changer 🤯

3 replies

alexander-akait Nov 1, 2022

Here's an example with which I was partially able to set up the minification, but it seems to automatically remove the , and the final tag.

Because you don't need it for HTML 5 docs by spec 😄 Try it in all HTML5 browsers, anyway if you need to support very old browser (do you really need IE6-7 😄 ?) You can pass the tag_omission: false option https://github.com/swc-project/bindings/blob/main/crates/html_node/src/lib.rs#L154

You can read about tag omission more in spec (i.e. no </li> ends, no <tbody></tbody> and more, I think you heard about it)

Also please use Promise.all and wait all promises otherwise you can have some problems with non finished async tasks

ivodolenc Nov 1, 2022
Author

Because you don't need it for HTML 5 docs by spec 😄 Try it in all HTML5 browsers, anyway if you need to support very old browser (do you really need IE6-7 😄 ?)

Honestly, this is the first time I've heard that I don't need those tags. All websites still use them that way, so it doesn't get any attention at all.

Ok, so everything works as it should. Thanks again for your help.

alexander-akait Nov 2, 2022

@ivodolenc

Honestly, this is the first time I've heard that I don't need those tags. All websites still use them that way, so it doesn't get any attention at all.

Yeah, maybe because we don't have full spec compliance HTML parser and minifier before in tooling (js solutions mostly based on regexps)

Ref: https://html.spec.whatwg.org/multipage/sections.html#the-body-element

Tag omission in text/html:
A body element's start tag can be omitted if the element is empty, or if the first thing inside the body element is not ASCII whitespace or a comment, except if the first thing inside the body element is a meta, noscript, link, script, style, or template element.
A body element's end tag can be omitted if the body element is not immediately followed by a comment.

Uh oh!

HTML Minifier? #6278

Uh oh!

ivodolenc Oct 27, 2022

Replies: 2 comments · 5 replies

Uh oh!

ivodolenc Oct 29, 2022 Author

Uh oh!

kdy1 Oct 29, 2022 Maintainer

Uh oh!

alexander-akait Nov 1, 2022

Uh oh!

ivodolenc Nov 1, 2022 Author

Uh oh!

Uh oh!

alexander-akait Nov 1, 2022

Uh oh!

ivodolenc Nov 1, 2022 Author

Uh oh!

Uh oh!

alexander-akait Nov 2, 2022

ivodolenc
Oct 27, 2022

Replies: 2 comments 5 replies

ivodolenc
Oct 29, 2022
Author

kdy1 Oct 29, 2022
Maintainer

ivodolenc
Nov 1, 2022
Author

ivodolenc Nov 1, 2022
Author