27 lines
No EOL
1.2 KiB
Markdown
27 lines
No EOL
1.2 KiB
Markdown
---
|
|
date: '2024-03-10T08:53-08:00'
|
|
title: 'Using an Eleventy event to optimize 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.<!-- excerpt -->
|
|
|
|
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)`. |