Minifying JS in Eleventy on production

This tutorial is written for the 11ty framework and we will be hosting the app on Netlify. Other platforms like Cloudflare and Vercel have similar support for this as well.

The goal of this tutorial is to speed up your local dev environment (by not spending resources minifying your code locally) and then making sure your javascript code is minified in production

Steps

1) Install the dotenv package so you can use environment variables.
npm install dotenv

2) Create the .env file and add it to your .gitignore.

3) Inside of .env, add this line ENVIRONMENT=local and save.

4) Add Dotenv to the top of your eleventy.js file
require('dotenv').config();

5) Log into Netlify and navigate to your site.

6) Click on "Site settings"

7) In the sidebar, click on the "Build & Deploy" link

8) Then click on the "Environment" sub link

9) Click on "Edit Variables" button

10) Add in the same key "ENVIRONMENT", and set the value to be "production"

11) Make sure to save!

12) In your codebase, make sure that the Terser package is installed
npm install terser

13) Import Terser into the top of your eleventy.js file
const { minify } = require("terser");

14) Following the tutorial from the 11ty dev site, we can add Terser (or use your existing implementation) like so:
https://www.11ty.dev/docs/quicktips/inline-js/

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
  code,
  callback
) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
});

15) Inside your new filter, wrap the minify function in an if statement

eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (
    code,
    callback
) {
    try {
        if(process.env.ENVIRONMENT === "production") {
            const minified = await minify(code);
            callback(null, minified.code);
        } else {
            callback(null, code);
        }
    } catch (err) {
        console.error("Terser error: ", err);
        // Fail gracefully.
        callback(null, code);
    }
});

16) Inside your nunjuck files, markdown, or liquid files, you can now reference your new filter that will only minify your code when it detects that its in production!

{% set js %}
    {% include "source/_includes/partial-js/authentication.js" %}
    {% include "source/_includes/partial-js/scripts.js" %}
    {% include "source/_includes/partial-js/profile.js" %}
{% endset %}
{{ js | jsmin | safe }}