clean-css VS HTMLMinifier

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.

By setting minifyCSS and minifyJS to true, the CSS will be minified together using clean-css and the JS will be minified together using UglifyJS to minify the JS together. Also, the other side of gatsby-plugin-minify is just multiplying html-minifier by postbuild in gatsby-node.js. You can set detailed options in html-minifier.

Depending on whether set to true or false (or not included as the default value is false), the last two options, --minify-js and --minify-css will minify the corresponding source of their type, only if included as inline style or script tags in the html being minified. It may also be good to know that the html-minifier options information states that clean-css and uglify-js are used for the minification when these options are included.

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.