Can we reduce the size of our compiled frontend code?

[dairiki]

In working on #1112, I noticed that our distribution is not small. The wheel is currently 1.3Mb zipped — 3.5Mb unzipped.

A large part of that size (2.7M, unzipped) comes from the compiled frontend code:

$ ls -s1h lektor/admin/static
total 2.7M
184K app.css
240K app.css.map
480K app.js
628K app.js.map
436K fontawesome-webfont-3KIJVIEY.svg
 76K fontawesome-webfont-5GKVPAEF.woff2
164K fontawesome-webfont-FMJ3VJ65.eot
164K fontawesome-webfont-RJ6LE7IU.ttf
 96K fontawesome-webfont-Z4ARLA73.woff
 72K roboto-slab-all-300-CD7CKZ7B.woff
 56K roboto-slab-all-300-ZPJL4QTS.woff2
 56K roboto-slab-all-400-26JDMZKQ.woff2
 72K roboto-slab-all-400-JK3TGTJI.woff

Questions (mostly for @yagebu):

We probably don't need the SVG, EOT, or TTF fontawesome fonts, though I am unsure of the easiest way to remove them from our CSS.

Do we need the full sourcemaps, or case we disable sourcesContent for production?

Should we turn up the minimize knobs more for production? Currently, we enable only minimizeSyntax. Should we enable minimizeIdentifiers and minimizeWhitespace as well? (I.e. just minimize: !dev.)

Is there anything else we can do to reduce the size?

(Doing all of the above reduces the unzipped size of lektor/admin/static/ from 2.7M to 1.2M, and the total size of the zipped wheel from 1.3M to 812K.)

[yagebu]

We probably don't need the SVG, EOT, or TTF fontawesome fonts, though I am unsure of the easiest way to remove them from our CSS.

Yep, that's something that I found somewhat unnecessary as well... We currently just use the CSS that fontawesome provides, we might have to copy that to remove those extra files.

I think we can also remove the .woff files and keep just the .woff2. If you're on a browser that doesn't support woff2, you shouldn't be on the internet, and missing fonts in the lektor admin should be the least of your worries :D (https://caniuse.com/woff2)

Do we need the full sourcemaps, or case we disable sourcesContent for production?

👍 I didn't know about that option, but I'd like to keep basic sourcemaps for production.

Should we turn up the minimize knobs more for production? Currently, we enable only minimizeSyntax. Should we enable minimizeIdentifiers and minimizeWhitespace as well? (I.e. just minimize: !dev.)

I chose just that option so that we still end up with a somewhat readable file of Javascript (and esbuild really does to a good job at that compared to other bundlers) and not just an opaque blob. I think that's best since we're shipping this "compiled" file as part of our "source" distribution. I guess the zipped file shouldn't end up being much better than with the two additional minimize knobs enabled.