How to minify your Eleventy build
Tags: performance, javascript, development, webdev
Published: 2020-10-16 01:05:05

---
title: How to minify your Eleventy build
published: true
date: 2020-10-16 00:30:00 UTC
tags: performance, javascript, development, webdev
canonical_url: https://www.benjaminrancourt.ca/how-to-minify-your-eleventy-build
cover_image: https://www.benjaminrancourt.ca/temp/how-to-minify-your-eleventy-build.jpeg
---
If you look at the output of your **Eleventy build** , you will see that your code is still very **readable** , your templates have been only injected with your data. All spacing and comments have been conserved. It is great for debugging purposes, but not so much for your visitors, as they will load more bytes to use your website. 😞

But what if we could remove all those characters that do not improve the user experience? That technique is named **minification** and even if Eleventy does not support natively this functionality, you only need a **couple of lines** to add it to your process build. 🤖

Eleventy provide us with a configuration named [**Transforms**](https://www.11ty.dev/docs/config/#transforms) that allow us to modify a template’s output. With that option, we can define a function that will take the **generated code** and minify it before the file is written. It is exactly what we needed. 😊

Eleventy even provide an **example** to **minify an HTML file** in their documentation. I reproduced it below, along with some minor changes:

```javascript
const htmlmin = require("html-minifier");

module.exports = (eleventyConfig) => {
  eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
    if (outputPath.endsWith(".html")) {
      return htmlmin.minify(content, {
        collapseWhitespace: true,
        removeComments: true,  
        useShortDoctype: true,
      });
    }

    return content;
  });
};
```
<figcaption><a href="https://www.11ty.dev/docs/config/#transforms-example-minify-html-output">Transforms Example: Minify HTML Output</a>, on Eleventy</figcaption>

You can now minify HTML files, but if you want to do the same thing to other types, like `JSON` or `XML`, this example can only inspire you…

In order to ease your pain, I recently created the **[@sherby/eleventy-plugin-files-minifier](https://www.npmjs.com/package/@sherby/eleventy-plugin-files-minifier)** npm package! This plugin take care to register a transform function that can **minify** the following types automatically for you:

- `html`
- `json`
- `xml`
- `xsl`
- `webmanifest`

To add this plugin, you only need to **install the dependency** with npm

```bash
npm install @sherby/eleventy-plugin-files-minifier --save-dev
```

and to **add the plugin** into your Eleventy config file (`.eleventy.js`)

```javascript
const eleventyPluginFilesMinifier = require("@sherby/eleventy-plugin-files-minifier");
module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(eleventyPluginFilesMinifier);
};
```

Pretty simple, right?

The current implementation checks at the **file extension** to choose how to correctly minify it. The file also needs to be written by Eleventy. 🧱

If your build minify **other types** and if you want to share it with the community, feel free to make a _Pull Request_ to the [code repository on GitHub](https://github.com/ranb2002/eleventy-plugin-files-minifier)! I made sure to add the [hacktoberfest](https://dev.to/ranb2002/hacktoberfest-2020-138d) topic, so it will count towards your progress! 🎉

So, what do you think of this new plugin?