DEV Community

loading...

Minifying JS in Eleventy on production

brewhousedigital profile image Brewhouse Digital Updated on ・2 min read

This tutorial is written for the 11ty project and Netlify deployment. I'm sure other platforms like Cloudflare have support for this as well.

The point of this tutorial is to speed up your local dev environment (by not minifying code) 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

Discussion (0)

pic
Editor guide