coryd.dev-eleventy/src/posts/2024/using-an-eleventy-event-to-optimize-component-javascript.md

date	title	description	tags
2024-03-10T08:53-08:00	Using an Eleventy event to optimize component JavaScript	I've added a small event to optimize web component JavaScript when my site builds.	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:

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).