Support for ES6 minification

[jantimon]

Hi

the html-webpack-plugin is making heavy use of html-minifier to keep the html compact.

Now that many browsers support ES6 out of the box, people start using ES6 inside script tags.
According to @evilebottnawi from the webpack team using ES6 is not possible because html-minifier is not capable of parsing ES6: https://github.com/jantimon/html-webpack-plugin/issues/1262

When webpack was faced with the same problem they made a switch to terser which has now about 6 million downloads per week.

uglify-es is no longer maintained and uglify-js does not support ES6+.

terser is a fork of uglify-es that mostly retains API and CLI compatibility with uglify-es and uglify-js@3.

(taken from their official readme)

There was already a proposal to do the same change for the html-minifier: #1034

It would mean to replace https://github.com/kangax/html-minifier/blob/51ce10f4daedb1de483ffbcccecc41be1c873da2/package.json#L63 with terser

[oneezy]

Bump.

[alexander-akait]

/cc @kangax

[willfarrell]

Workaround:

const jsMinify = require('terser').minify;
const htmlMinify = require('html-minifier').minify;
const htmlMinifyOptions = {
  ...
  minifyJS: (text, inline) => {
        const res = jsMinify(text, { warnings: true })
        if (res.warnings) console.log(res.warnings)
        if (res.error) {
            console.log(text)
            throw res.error
        }
        return res.code
    }
...
}
...
output = htmlMinify(output, htmlMinifyOptions)

[laurentpayot]

Wish there was a workaround for the CLI too…

[jantimon]

@alexlamsl do you think can we solve this?

[alexander-akait]

@jantimon i think we can use workaround from https://github.com/kangax/html-minifier/issues/1040#issuecomment-535683956 in html-webpack-plugin

[laurentpayot]

I deleted node_modules/uglify-js, and replaced it with a symbolic link to node_modules/terser. Worked like a charm, now on my machine html-minifier does minify ES6. What is preventing the replacement of the unsupported uglify-js dependency by terser?

[rodrigograca31]

@LaurentGoderre probably fear of breaking things.....

I also need this feature. I had a very simple script in my page which was not being compressed. 2 hours later I found out its due to using let to declare my variable instead of the old var and this plugin being dependent on another that doesn't support ES6.... :man_facepalming:

<script>
	let mail = 'example' + '@' + 'gmail.com';
	document.getElementById("hidden_email").text = mail;
	document.getElementById("hidden_email").href = 'mailto:' + mail;
</script>

[DanielRuf]

It seems the current maintainer is not interested to help with this. I'll create a fork and a patch to replace this as we have even more issues with uglify-js >=3.

[rodrigograca31]

@kangax hey! Seems you are slacking a bit.... This project is awesome but its starting to get outdated.... Moving to terser is a big necessity.

Maybe @DanielRuf should send a PR....? I saw his code and seems good, he also accepted another important PR....

@kangax or add someone as a collaborator so that we can keep the project updated and moving forward?

Thanks

[DanielRuf]

@rodrigograca31 well, after reporting an issue with uglify-js and getting this feedback I don't think that there is any interest from the current maintainer to switch to terser: https://github.com/kangax/html-minifier/issues/1048#issuecomment-549005417

Anyways, here is a version which uses terser: https://danielruf.github.io/html-minifier-terser

[rodrigograca31]

Yeah, the bigger problem is that there was another big project that depended on this one.... so if we improved the original project it would trickle down and improve other projects....

[DanielRuf]

Which project exactly do you mean? In general a new major version should prevent any breaking changes in the other project(s) unless they do not use SemVer ranges for their dependencies or pin them.

[rodrigograca31]

Cant remember specifically but the first 2 here are pretty big: https://www.npmjs.com/browse/depended/html-minifier

[DanielRuf]

Well, these are packages of the webpack org that are mostly maintained by @jantimon and I am also in the webpack team.

Bumping the major version to 5 will not produce any problems. So this should provide a chance to migrate to a new version with a new minify engine for JS and ES.

[DanielRuf]

Imho there is no real reason to not do this step.

[DanielRuf]

html-minifier-terser v5.0.0 is released now: https://www.npmjs.com/package/html-minifier-terser

[laurentpayot]

@DanielRuf thanks for html-minifier-terser, it's working great :+1:

[jantimon]

html-webpack-plugin 4.0.0-beta.11 switched to html-minifier-terser