on production build, minify HTML

calebnance commented 3 years ago

On a production build (npm run build) HTML will be minified.

This saves a decent amount of bytes within the /fonts/ (even at this point, once more font pages are added you'll see more gains) and this helps your lighthouse score.

Below is the fonts directory size before and after minification:

	directory size
non-minified	1,350.303kb
minified	1,276.905kb

chriscoyier commented 3 years ago

Thanks for this!

I'm a little tempted to just put Cloudflare in front of the site as it does this without the technical debt. But, this is neat to do it in the build. I've never pulled it off before so it'll be nice to have this as a reference. Looking at the staging preview though, it almost looks less minifed??

calebnance commented 3 years ago

@chriscoyier yeah that's definitely not minified on: https://deploy-preview-76--coding-fonts.netlify.app.

with your deploy script, does it run the production build? or what does that file look like? or is it all manual from your local CLI?

Make sure you're running npm install for the new package added (html-minifier) and npm run build to run with the production environment flag.

I'm just trying to troubleshoot with you ^

chriscoyier commented 3 years ago

The build process runs:

PROD="true" eleventy

So maybe check that ENV variable instead of the one you are now?

calebnance commented 3 years ago

that was fun, sorry for trying out a few things on the deploy side of the house, tried to keep it minimal.

html is now being minified.

a few other take aways from this PR though:

all files within /code_samples/ directory is being created to html: https://coding-fonts.css-tricks.com/code_samples/charmap/ (is this desired? thought that directory was only being used for screenshot templating)
you can remove it from being created in the Eleventy process by using .eleventyignore (more info here: https://www.11ty.dev/docs/ignores/) i added that to this repo so you can take a look.
so now this is working on local build (delete dist and re-run npm run build, /code_samples is no longer there)
but for some reason the netlify process is not seeing that ignore file? and is still creating that sub-directory (see here: https://deploy-preview-76--coding-fonts.netlify.app/code_samples/charmap/).

soooo, all that to say (haha) one thing i can think of is the netlify deploy process is not clearing the /dist/ directory and if files are already there, it's re-uploading, since we are no longer re-writing those exact file locations, it's just continuing to upload old files.

a solution could be have some type of "clear/remove cached" /dist/ directory so you are always only uploading latest and greatest and if a file is removed in the future, it'll be removed from the server as well.

i hope that all made sense

chriscoyier commented 3 years ago

I'm not thaaaaat worried about the screenshot routes being on production. It might be handy for some people to see for some reason. Let's just roll with this and maybe someday they'll disappear. Who knows. I see the HTML is being minified now and don't catch any obvious side effects from that, so let's roll with it.

CSS-Tricks / coding-fonts

on production build, minify HTML #76