Skip to content

illvart/gatsby-plugin-minify-html

Repository files navigation

gatsby-plugin-minify-html

Travis NPM version Downloads Issues

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

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.