gatsby-plugin-minify-html

A Gatsby plugin for minify HTML files.

With this plugin, you can minify each HTML files (.html) at public directory.

NOTE: This plugin only generates output when run in production mode! To test your minify HTML, run: gatsby build && gatsby serve.

Table of Contents

• Installation
• Usage
  • Options
    • Example
• Contributing
• License

Installation

Install with yarn:

yarn add gatsby-plugin-minify-html

Or install with npm:

npm install --save gatsby-plugin-minify-html

Usage

After installing gatsby-plugin-minify-html you can add it to the plugins array in your gatsby-config.js file:

module.exports = {
  plugins: ['gatsby-plugin-minify-html']
};

Note: if you are using gatsby-plugin-brotli, gatsby-plugin-zopfli, or other plugins look like used the Gatsby Node APIs onPostBuild make sure that it’s listed after this plugin:

// good
module.exports = {
  plugins: [
    'gatsby-plugin-minify-html',
    'gatsby-plugin-brotli'
  ]
};

// bad
module.exports = {
  plugins: [
    'gatsby-plugin-brotli', // should be placed after 'gatsby-plugin-minify-html'
    'gatsby-plugin-minify-html'
  ]
};

Options

This plugin uses html-minifier-terser, to use html-minifier-terser options put the options at config: { }.

You can see the options of html-minifier-terser are enabled default by this plugin in the minify-html-plugin.js:

Name	Type	Default	Description
collapseWhitespace	Boolean	true	Collapse white space that contributes to text nodes in a document tree
minifyCSS	Boolean	true	Minify CSS in style elements and style attributes
minifyJS	Boolean	true	Minify JavaScript in script elements and event attributes
removeComments	Boolean	true	Strip HTML comments
removeScriptTypeAttributes	Boolean	true	Remove type="text/javascript" from script tags. Other type attribute values are left intact
removeStyleLinkTypeAttributes	Boolean	true	Remove type="text/css" from style and link tags. Other type attribute values are left intact

See all options html-minifier-terser at Options Quick Reference.

Example

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-minify-html',
      options: {
        debug: true, // debug optional, default false
        config: {
          // Enabled default by this plugin
          collapseWhitespace: false,
          minifyCSS: false,
          minifyJS: false,
          removeComments: false,
          removeScriptTypeAttributes: false,
          removeStyleLinkTypeAttributes: false,
          // Disabled default by html-minifier-terser
          sortAttributes: true,
          useShortDoctype: true
        }
      }
    }
  ]
};

When option debug: true you can see a generate logs, example logs:

Minify HTML files at public directory, total HTML files 7:
public/404/index.html > reduced 0.20%.
public/index.html > reduced 0.19%.
...

Contributing

If you would like to help out with some code, check the details.

License

Licensed under MIT.