How to use the HTML minifier from Node.js?

[slorber]

Hi

I'm in the process of adding @swc/html to Docusaurus and really getting great results so far 👏:

• reducing our SSG phase execution time from 7s to 2.5s on our own website
• reducing HTML size
• our visual regression pipeline doesn't report any visual problems so far

PR facebook/docusaurus#10554

It turns out the most popular Node option is probably terser/html-minifier-terser but it's a real bottleneck for our SSG framework, and @swc/html gives a significant perf boost. I think it deserves more attention from the community.

Unrelated but curious: have you benchmarked it against @minify-html/node?

---

Unfortunately, the Node.js package is not really documented, or at least I couldn't find it

https://github.com/swc-project/swc/tree/main/packages/html

I saw this other discussion from 2022: #6278

It's supported, but it's barely documented

I've figured out how to use it through types, reading Options comments found in Rust crates and in Webpack plugin code:

• Types: https://github.com/swc-project/swc/blob/main/packages/html/index.ts
• Rust Options: https://github.com/swc-project/swc/blob/main/crates/swc_html_minifier/src/option.rs
• Webpack plugin: https://github.com/webpack-contrib/html-minimizer-webpack-plugin/blob/master/src/utils.js

I was wondering if you plan to document it and/or if you need any help.

That would be a shame if the community missed this great package due to a lack of basic docs and little DX polishment, in particular SSG frameworks.

Considering the current npm downloads, I'll probably be the first to use it on something concrete.

Note I've opened a PR with a few TS suggested type changes: #9615

I also think it could improve the DX if we could pass an HTML string as 1st param and not just a buffer.

That could also be useful to explain it how to use it in a React context, because some options could mess up with React hydration. BTW do you have recommendations on that?

So far I'm using the following options:

    const result = await minify(Buffer.from(html), {
      // Removing comments can lead to React hydration errors
      // See https://x.com/sebastienlorber/status/1841966927440478577
      removeComments: false,
      // TODO maybe it's fine to only keep <!-- --> React comments?
      preserveComments: [],

      // Sorting space attributes like class can lead to React hydration errors
      sortSpaceSeparatedAttributeValues: false,

      // @ts-expect-error: type
      removeRedundantAttributes: 'all',
      removeEmptyAttributes: true,
      minifyJs: true,
      minifyJson: true,
      minifyCss: true,
    });
    return result.code;

Thanks!

[slorber]

Note: I'm also not sure how to handle result.errors because SWC seems to return errors a bit too aggressively.

For example, it errors for React code such as <div dangerouslySetInnerHtml={{__html: "<span />"}} (which indeed is invalid HTML but not so uncommon).

I'm not sure we should throw and block the SSG process just because of that. I'm not sure either it's a good idea to swallow those errors.

[kdy1]

It turns out the most popular Node option is probably terser/html-minifier-terser but it's a real bottleneck for our SSG framework, and @swc/html gives a significant perf boost. I think it deserves more attention from the community.

Great! I'm really glad to see it used.

Unrelated but curious: have you wilsonzlin/minify-html#202?

No, I didn't.

I was wondering if you plan to document it and/or if you need any help.

I'll add documentation about it tomorrow. While working on it I will add some tests to ensure that it can be used for react SSG frameworks.

Thank you so much for interest! @alexander-akait did wonderful work for it.

[kdy1]

I'm sorry, I'll do it tomorrow as a part of the work. I'm too tired today because I went to a tech meetup in South Korea.

[slorber]

Awesome thanks :)

No hurry on my side, I was able to solve my problem, but the community would probably appreciate a faster minimizer