Originally posted on The Simplest Web Site That Could Possible Work Well on zachleat.com
This tip works great if you have small JS utilities that you’d like to have in your <head>. For example, this works great with the Filament Group loadJS or loadCSS utilities.
npm install terser to make the terser minifier available in your project.
Add the following jsmin filter to your Eleventy Config file:
eleventy.config.js
import { minify } from "terser";
export default function (eleventyConfig) {
eleventyConfig.addFilter("jsmin", async function (code) {
try {
const minified = await minify(code);
return minified.code;
} catch (err) {
console.error("Terser error: ", err);
// Fail gracefully.
return code;
}
});
};const { minify } = require("terser");
module.exports = function (eleventyConfig) {
eleventyConfig.addFilter("jsmin", async function (code) {
try {
const minified = await minify(code);
return minified.code;
} catch (err) {
console.error("Terser error: ", err);
// Fail gracefully.
return code;
}
});
};Add a sample JavaScript file to your _includes directory. Let’s call it sample.js.
// Hi
console.log("Hi");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 -->
<script>
{{ js | jsmin | safe }}
</script>WARNING
If you are using a Content Security Policy on your website, make sure the script-src directive allows 'unsafe-inline'. Otherwise, your inline Javascript will not load.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。