Quick Tip #002—Inline Minified JavaScript

All Quick Tips

• #001—Inline Minified CSS
• #002—Inline Minified JavaScript
• #003—Add Edit on GitHub Links to All Pages
• #004—Zero Maintenance Tag Pages for your Blog

Installation #

npm install uglify-js to make the Uglify JS minifier available in your project.

Configuration #

Add the following jsmin filter to your Eleventy Config file:

const UglifyJS = require("uglify-js");
eleventyConfig.addFilter("jsmin", function(code) {
    let minified = UglifyJS.minify(code);
    if( minified.error ) {
        console.log("UglifyJS error: ", minified.error);
        return code;
    }
    return minified.code;
});

Create your JavaScript File #

Add a sample JavaScript file to your _includes directory. Let’s call it sample.js.

// Hi
console.log("Hi");

Capture and Minify #

Capture the JavaScript into a variable and run it through the filter (this sample is using Nunjucks syntax)

<!-- capture the JS content as a Nunjucks variable -->
{% set js %}{% include "sample.js" %}{% endset %}
<!-- feed it through our jsmin filter to minify -->
<style>{{ js | jsmin | safe }}</style>

Originally posted on The Simplest Web Site That Could Possible Work Well on zachleat.com