Minifying the resulting JS file more

Hi, I just saw that in the resulting JS file there are a lot of white spaces, many of them probably unecessary, wasting bandwidth, and every KB saved is a great thing! Doesn’t sound like much, but still…

I searched for “at least” double spaces in VSCode and then deleted them to compare the sizes.

Before:

After:

Please note that this might not be 100% accurate, nor have I tested the code for functionality, but most of these spaces could be eliminated without any issue, especially those between html tags, before/after line breaks \n) and such.

I’m not just pointing it out. I want to help too. That means if I’m allowed I would clone this repo and include a little grunt script into it. This script would essentially take the final JS file, erase the spaces following a regex or something and then overwrite it. There are probably other ways, but I was thinking that this would be the straightest route.

EDIT: I just saw that ESLint has some minifying options too, but I’m not familiar with it, I just flown over the related documentation real quick.

[Fusseldieb]

Terser has a rollup plugin so if that does the trick I’m all for it 👍

I used it according to documentation, but for some reason it just removed the comments from the final file, leaving the JS file with all whitespaces in place, making it even bigger. I tried all available options, but they shouldn’t be needed, since mangle and compress is already enabled by “default” by terser and this is just a wrapper. I thought a plugin was interfering with it, so I disabled everything and tried to rollup-plugin-terser almost barebone, to no avail.

Testing Terser itself in the CLI did in fact minimize the final file and made it 543 Bytes smaller (by basically making \" into " where possible) compared to babels “minify”. However, the whitespaces after \n on the HTML Elements are still there.

Am currently trying to make use of the more “advanced” options of the Terser CLI… Let’s see…

EDIT: Using Terser and using almost all its compress functions (ES6), I managed to reduce it 2604 Bytes compared to master dist. Not yet tested. Whitespaces in template literals are still there.

EDIT2: RTFM they say, and it’s true. According to lit-htmls documentation I found rollup-plugin-minify-html-literals and that did the trick right away. Whitespaces gone. Size reduced even further. Now 7478 Bytes (7KB!!!) less compared to master dist.

EDIT3: Tested in “production” Home Assistant with several graph styles (y-secondary, bars, simple, state_map…) and working fine. Filesize currently: 80.8KB.

Can I PR it, @kalkih ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!