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.
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 }}
Top comments (0)