DEV Community

Brewhouse Digital
Brewhouse Digital

Posted on • Updated on

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"
Site Settings

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

8) Then click on the "Environment" sub link
Environment sub link

9) Click on "Edit Variables" button
Edit Variables button

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

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);
  }
});
Enter fullscreen mode Exit fullscreen mode

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);
    }
});
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)