From 9ce8a8b53bad488263247bf1bc33f4fb196529b6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sun, 10 Mar 2024 08:52:50 -0700 Subject: [PATCH] chore: post --- ...-event-to-optimize-component-javascript.md | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/posts/2024/using-an-eleventy-event-to-optimize-component-javascript.md diff --git a/src/posts/2024/using-an-eleventy-event-to-optimize-component-javascript.md b/src/posts/2024/using-an-eleventy-event-to-optimize-component-javascript.md new file mode 100644 index 00000000..31c9191a --- /dev/null +++ b/src/posts/2024/using-an-eleventy-event-to-optimize-component-javascript.md @@ -0,0 +1,27 @@ +--- +date: '2024-03-10' +title: 'Using an Eleventy event to optimise component JavaScript' +description: "I've added a small event to optimize web component JavaScript when my site builds." +tags: ['development', 'javascript', 'Eleventy'] +--- +My site leverages a number of web component for functionality on my site. Namely: mastodon post embeds, search, my now playing component, my theme toggle, post sharing and YouTube embeds. It's all loaded on pages only as needed but, I wanted to make sure it was all minified. + +So, I've created this event in `events/index.js`: + +```javascript +export const minifyJsComponents = async () => { + const jsComponentsDir = '_site/assets/scripts/components'; // the directory my component js is copied to + const files = fs.readdirSync(jsComponentsDir); + for (const fileName of files) { + if (fileName.endsWith('.js')) { + const filePath = `${jsComponentsDir}/${fileName}`; + const minified = await minify(fs.readFileSync(filePath, 'utf8')); + fs.writeFileSync(filePath, minified.code); + } else { + console.log('⚠ No js components found') + } + } +} +``` + +Which is then run in my `.eleventy.js` file: `eleventyConfig.on('afterBuild', minifyJsComponents)`. \ No newline at end of file