1.0.4 • Published 4 years ago

gatsby-plugin-minify-html v1.0.4

Weekly downloads
976
License
MIT
Repository
github
Last release
4 years ago

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:

NameTypeDefaultDescription
collapseWhitespaceBooleantrueCollapse white space that contributes to text nodes in a document tree
minifyCSSBooleantrueMinify CSS in style elements and style attributes
minifyJSBooleantrueMinify JavaScript in script elements and event attributes
removeCommentsBooleantrueStrip HTML comments
removeScriptTypeAttributesBooleantrueRemove type="text/javascript" from script tags. Other type attribute values are left intact
removeStyleLinkTypeAttributesBooleantrueRemove 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.