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-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:
moduleexports = 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:
// goodmoduleexports = plugins: 'gatsby-plugin-minify-html' 'gatsby-plugin-brotli' ; // badmoduleexports = 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
moduleexports = 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.