gatsby-plugin-minify-html v1.0.4
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
Install with yarn:
yarn add gatsby-plugin-minify-htmlOr install with npm:
npm install --save gatsby-plugin-minify-htmlUsage
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.