eleventy-load-html

Find dependencies in and minify HTML using eleventy-load.

Getting Started

Firstly, you'll need to install eleventy-load (if you haven't already) and eleventy-load-html.

npm install --save-dev eleventy-load eleventy-load-html

Then you can set up eleventy-load-html using a rule in your eleventy-load options. Note that eleventy-load tests the input path, so we want to apply eleventy-load-html to both HTML and Markdown templates.

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-load"), {
    rules: [
      {
        test: /\.(html|md)$/,
        loaders: [
          {
            loader: require("eleventy-load-html"),
          },
        ],
      },
    ],
  });
};

Options

Name	Type	Default	Description
attributes	Boolean	true	Find dependencies from HTML attributes
minimize	Boolean|Object	false	Minimize using html-minifier-terser

attributes

Type: Boolean Default: true

Find dependencies from HTML attributes which will be processed by eleventy-load (if a loader is configured to process the dependency).

List of attributes which eleventy-load-html checks for dependencies

const ATTRIBUTES = [
  {
    tag: "audio",
    attribute: "src",
  },
  {
    tag: "embed",
    attribute: "src",
  },
  {
    tag: "img",
    attribute: "src",
  },
  {
    tag: "img",
    attribute: "srcset",
  },
  {
    tag: "input",
    attribute: "src",
  },
  {
    tag: "link",
    attribute: "href",
  },
  {
    tag: "object",
    attribute: "data",
  },
  {
    tag: "script",
    attribute: "src",
  },
  {
    tag: "script",
    attribute: "href",
  },
  {
    tag: "script",
    attribute: "xlink:href",
  },
  {
    tag: "source",
    attribute: "src",
  },
  {
    tag: "source",
    attribute: "srcset",
  },
  {
    tag: "track",
    attribute: "src",
  },
  {
    tag: "video",
    attribute: "poster",
  },
  {
    tag: "video",
    attribute: "src",
  },
  {
    tag: "image",
    attribute: "xlink:href",
  },
  {
    tag: "image",
    attribute: "href",
  },
  {
    tag: "use",
    attribute: "xlink:href",
  },
  {
    tag: "use",
    attribute: "href",
  },
];

minimize

Type: Boolean|Object Default: false

If true or an Object, eleventy-load-html will minimize HTML using html-minifier-terser. If an Object, these will be provided to html-minifier-terser as options.

{
  loader: require("eleventy-load-html"),
  options: {
    minimize: {
      removeComments: true,
    }
  },
},