optimize code | Astro Lounge | Page 1

Hi @sudden cobalt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To make your code less repetitive in Astro, you can consider the following strategies based on the information provided in the extracts:

Use Components: In Astro, you can create reusable components to avoid repeating code. For example, you can create a <CommonHead /> component that contains all of the stuff you put in your <head> on various pages, including scripts. Similarly, you can create a <GoogleAnalytics /> component that adds an analytics script. This way, you can reuse these components across your application without repeating the same code. Source (https://github.com/withastro/astro/issues/370)
Optimize Scripts: Astro provides a way to optimize scripts to avoid repetition. You can use a special attribute on <script> elements called optimize. This will move the script to the head, bundle the script with other scripts marked as optimized (in production), and only add the script once (in the head) regardless of how many times the component is used. Source (https://github.com/withastro/astro/issues/1077)

Here's an example of how to use the optimize attribute:

<my-element></my-element>
<script optimize>
  customElements.define('my-element', class extends HTMLElement {});
</script>

Use Module Scripts: If you're dealing with scripts that need to be executed only once, consider using module scripts. Module scripts are deferred by default, meaning they don't block HTML parsing and are executed after the document has been completely parsed. Source (https://github.com/withastro/astro/issues/370)

Remember, the key to writing less repetitive code is to identify common patterns and abstract them into reusable pieces. In Astro, these pieces can be components, optimized scripts, or module scripts.