HTMLMinifier VS eleventy 🕚⚡️

Minification involves removing unnecessary characters, whitespace, and comments from code files. It helps reduce HTML, CSS, JavaScript, etc., file sizes without compromising functionality. Removing redundant elements makes these HTML, JavaScript, and CSS files smaller. Since smaller code files need less internet traffic to transfer, they load faster. Utilizing tools like UglifyJS, Clean-CSS, and HTMLMinifier enhances this process of code reduction. They analyze the code, remove redundant code, and generate optimized files for deployment.

html-minifier works since it has a cli and I can do something like the authors states in the documentation html-minifier --collapse-whitespace inside package.json "scripts": { }, thus I can run the task through the VSCode interface

[build] command = "pnpm build" publish = "_site" [build.processing] skip_processing = false [build.processing.css] minify = true bundle = false [build.processing.js] minify = true bundle = false # Config for the Netlify Build Plugin: netlify-plugin-minify-html [[plugins]] package = "netlify-plugin-minify-html" # Specify which deploy contexts we'll minify HTML in. # Supports any Deploy Contexts available in Netlify. # https://docs.netlify.com/site-deploys/overview/#deploy-contexts [plugins.inputs] contexts = [ 'production', 'branch-deploy', 'deploy-preview' ] # Optionally, override the default options for the minification # https://github.com/kangax/html-minifier#options-quick-reference [plugins.inputs.minifierOptions] collapseWhitespace = true conservativeCollapse = true minifyCSS = true minifyJS = true

Program: html-minifier Arguments: $FileName$ --collapse-whitespace --remove-comments -o $FileName$

HTMLMinifier

I found this one https://github.com/kangax/html-minifier which seems to be browser compatible, but impossible to get it to build with my setup (Next.js + typescript).

That's Minifcation and you'd normally thigs like https://github.com/kangax/html-minifier

I am not sure what you'd use this tool for possibly for scraping work but beautiful soup is probably better for that

☕ Minify HTML & CSS with HTMLMinifier and cssnano

The --file-ext option is set to html (in this example it is not needed), however if the input directory contains file types other than "html", errors may occur as a result of the attempted minification of those files. In the html-minifier github repository there is open issue to support multiple file extensions. A possible workaround for the time being is to add multiple package.json scripts, with each one running a separate command for each of the individual file types that will be minified. Additionally there are many other minifier packages available on npm and one of those may be better suited for file types other than html.

This post outlines the steps for migrating an existing BlogCFC blog to a JamStack, with a focus on using Eleventy.

I suggest you to try out eleventhy (https://www.11ty.dev/)

Quite simple to start, and a nice system to add some scripting and styles without the requirement of bringing in a framework.

A production flag enables you to run activities in dev or production such as minifying assets, showing draft posts, etc. There isn't a built-in flag or function that comes with eleventy (11ty) specifically for this. However we have this info at our fingertips.

I can't recommend Eleventy enough!

https://www.11ty.dev

I converted my WordPress blog to Eleventy 4 years ago and never looked back, it's been delightful!

https://www.joshcanhelp.com/taking-wordpress-to-eleventy/

It’s 2024, and you are about to start a new project. Do you reach for React, a framework you know and love or do you look at one of the other hot new frameworks like Astro, Enhance, 11ty, SvelteKit or gasp, plain vanilla Web Components?

The "dev" script is running the eleventy server in dev mode. The details of the script are not important for this discussion, but to round out the background here is an abbreviated version of my package.json:

Eleventy is a fast and powerful SSG that really shines when it comes to pure static site generation because it does not require the loading of a client-side JavaScript bundle in order to serve content.

The irony is using a JavaScript-based static site generator to make the site: https://www.11ty.dev

https://doublejosh.com/post/186193119278/metalsmithjs-is-sti...

Then two years ago I needed a more robust SSR system based on React, so I went with GatsbyJS. It's insanely mature and intuitive, but as we all know that community and business is now drying up too. But the framework is still great.

Now everyone sings the praises of NextJS, which can be used for SSR but is intended for applications and active server endpoints. But more complexity doesn't mean better.

I'm keen to try other simple frameworks when the result is a static site. I may give https://www.11ty.dev a shot.

11ty is a lightweight static site generator. I chopped up my HTML and used the 11ty starter template called eleventy-base-blog as the structural foundation for the site.