How to minify Lit-HTML (including comments)

Question

I decided to try out lit-html via:

npm install lit-html --save

I've heard numerous times (from various sources) that lit-html is only 2 or 3KB in size, but by only importing the html and render exports it caused my webpack to grow over 13KB. That's much larger than expected.

Additionally, the final dist package had this embedded in it 7 times:

/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
**/

That's a bit excessive.

I thought webpack 4 was suppose to remove comments automatically. How can I get this to be tightly minimized with all my other code (where comments are automatically removed and everything is just pushed together in one line)?

I can live without lit-html if its too intrusive.

Answer 1

This question is a decent summary of what's wrong these days with Web development, so I've decided to take the bullet with this answer, providing also various details needed to answer all the sub-questions of the OP.

Dependencies just because ?

I've heard numerous times (from various sources) that lit-html is only 2 or 3KB in size

To produce best results in software, we usually decide to include some dependency because of its features, what it solves for us, and ultimately how well.

The fact people say that one library or utility is small, shouldn't automatically translate into "then I'll include it", specially when your last statement is:

I can live without lit-html

Since I don't feel much effort or even enthusiasm in your question or will to use lit-html, are you sure you even need it at all?

A wrongly measured trade-off

When we talk about "Web things", we usually talk about production code, and all common-sense techniques and best practices used to obtain such production code.

That includes the usage of static files compression, so that by default, importing just render and html from lit-html will produce a bundle of 3.5Kb as minified and compressed production size.

That is where your numbers come from, even if slightly bigger than its first release where the basics worked indeed in about 2Kb (minified and gzipped), lit-html provides already enough juice out of 3.5Kb, which size is absolutely irrelevant compared to the rest of the World Wide Web.

Your favicon.ico, or the request to get it, carrying all the eventual cookies, might weight already a similar, if not greater, amount of bytes.

Are you sure the issue of the internet, or even your site, is a library that adds 3.5Kb extra?

The mobile oriented budget suggested by major experts is less than 170Kb, minified and compressed, which is roughly 48 times lit-html, I think that's enough room for your initial logic.

About criticizing the license

Additionally, the final dist package had this embedded in it 7 times:

Not only compression makes repeated text size almost irrelevant, you are arguing about license text from a Google product that, if I were you, I'd be careful hiding by any mean.

I thought webpack 4 was suppose to remove comments automatically.

When comments are written like /*! important */ these are usually preserved by minifiers, because the author of the source code meant to leave that comment in.

This is a common technique to keep licenses around, but even if there are tools that won't care about any sort of comment, unless instructed differently, as example via --comments=/^!/ via uglify-js, remember that your site, app, project, that is using third parts software, must include such software license in a way or another.

I am confident you didn't mean to discredit the Polymer team or Google license, but since this matter is very delicate, I've thought it was better to be sure we're all on the same page about those.

How to minimize, anyway

How can I get this to be tightly minimized with all my other code (where comments are automatically removed and everything is just pushed together in one line)?

By default, Webpack preserves important comments and unless you want to hook yourself into Webpack internals to avoid doing that by default, you can use one of those tools that won't keep them, unless instructed differently.

The most common used one is UglifyJS. Known as uglify-js npm module, or uglify-es for ES2015+ code, it strips by default all comments.

You can try it via npx without even installing it:

npx uglify-es webpack/exported/lit-html.js

And see that the output will already show no comments.

The way to automate this is to install UglifyJS as devDependency, and modify webpack files directly or through the -o directive, as entry of your package.json script.

Alternatives

It's very easy to integrate UglifyJS in both Webpack and Rollup, but since you already know Webpack, I suggest you take a look at this repository which only aim is to show how to bundle either lit-html or hyperHTML.

You can clone, install, and test it locally, to see best results, dropping eventually the babel transformation if you are targeting ES2015 capable browsers already (it produces smaller results).

You can verify live that once minified and gzipped, including the "Hello World" code, lit-html weights 3.5Kb in Webpack, and 4.2Kb in rollup but after being transpiled with the whole preset-env, something you can also adjust to fine-tune your bundle.

As summary

Even if I'm the author of the main library that competes with lit-html, it's extremely demotivating to read complains about libraries under 10Kb that revolutionize the way we can develop the Web.

Every other mainstream framework is 5 to 20 times heavier than lit, or hyperHTML, and the Web has bigger issues than ~5K utilities so please, next time you see a license for a library that interests you, and the size is irrelevant for everything that is the Web these days, don't easily shoot at the library authors or the bundler that is simply respecting the library copy-rights and licenses.

Thank You.