scully-plugin-minify-html

This postRenderer plugin for Scully will minify the HTML of your prerendered pages.

Removing unnecessary code will decrease the size of your files. This will speed up your loading times and mobile scores even more!

Installation

To install this library with npm run

$ npm install scully-plugin-minify-html --save-dev

or with yarn

$ yarn add scully-plugin-minify-html

This package depends on the html-minifier-terser package. It will be installed automatically when installing this package.

Usage

Import and add the plugin to the defaultPostRenderers to execute it on all rendered pages or use the postRenderers on a route configuration to execute it for a specific route.

Important: the current implementation of Scully is that if you provide a postRenderers option on a route level, it will ignore the configuration of the defaultPostRenderers option at the root level of the config.

For more information, check out: https://github.com/scullyio/scully/issues/595

const { RouteTypes } = require('@scullyio/scully');
const { MinifyHtml } = require('scully-plugin-minify-html');

const postRenderers = [MinifyHtml];

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: postRenderers,  // for all routes
  routes: {
    '/blog/:slug': {
      type: RouteTypes.contentFolder,
      slug: {
        folder: "./blog"
      },
      postRenderers: postRenderers      // per route config
    },
  }
};

Now build your app and then just run the Scully command.

npm run build --prod
npm run scully

Configuring the html-minifier options

The MinifyHtml plugin uses html-minifier under the hood, so we can configure the minify options that are being used. The available options can be found in the interface Options

The default configuration is currently set at:

import { Options } from 'html-minifier';

const defaultMinifyOptions: Options = {
  caseSensitive: true,
  removeComments: true,
  collapseWhitespace: true,
  collapseBooleanAttributes: true,
  removeRedundantAttributes: true,
  useShortDoctype: true,
  removeEmptyAttributes: true,
  minifyCSS: true,
  minifyJS: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  // don't remove attribute quotes, not all social media platforms can parse this over-optimization
  removeAttributeQuotes: false,
  // don't remove optional tags, like the head, not all social media platforms can parse this over-optimization
  removeOptionalTags: false,
  // scully specific HTML comments
  // this will always be added in the final minifyOptions config
  ignoreCustomComments: [
    /scullyContent-(begin|end)/
  ],
  // scully specific data injection
  // this will always be added in the final minifyOptions config
  ignoreCustomFragments: [
    /\/\*\* ___SCULLY_STATE_(START|END)___ \*\//
  ]
};

Configuring the options can be done via the setPluginConfig function. You can specifiy a subset of the minification options that will override the default configuration.

const { RouteTypes, setPluginConfig } = require('@scullyio/scully');
const { MinifyHtml, MinifyHtmlOptions } = require('scully-plugin-minify-html');

const postRenderers = [MinifyHtml];

const minifyHtmlOptions: MinifyHtmlOptions = {
  minifyOptions: {
    removeComments: false
  }
};
setPluginConfig(MinifyHtml, 'render', minifyHtmlOptions);
// or 
// setPluginConfig(MinifyHtml, minifyHtmlOptions); 

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: postRenderers,
  routes: {
    '/blog/:slug': {
      type: RouteTypes.contentFolder,
      slug: {
        folder: "./blog"
      },
      postRenderers: postRenderers
    },
  }
};

More information

I've written a blogpost about custom plugins for Scully. Check it out to learn more on how to build your own custom plugins.

More info on getting started with Scully can be found on their homepage.