Build-Only Scripts

Many components are static: they don't need to be shipped to or executed on the client after they've been pre-rendered. For example, you might want to write your pages using markdown. You could use components such as zero-md to do that:

<script type="module" src="https://esm.sh/zero-md"></script>
<zero-md>
  <script type="text/markdown">
    # Hello, World!

    This is some markdown that I've written.
  </script>
</zero-md>

After pree pre-renders this HTML, there is no need to parse the markdown and re-render it on the client. Clients will unnecessarily download a whole markdown parser and parse all of this markdown.


👉 Add build-only attribute to scripts that don't need to be loaded by the client:

<script build-only type="module" src="https://esm.sh/zero-md"></script>

pree will remove any such script from the final HTML:

 🧬 these scripts are also removed from inside web components, ⚡ this will increase performance by reducing executed scripts, 📦 this will reduce asset size that's downloaded.

⚠️ Compatibility

All of this relies on declerative shadow DOM, which some browsers might not support yet. Such browsers can't display the pre-rendered content of such components at all. If you need to support such browsers, ensure to include the code of all components and only use build-only on scripts that will modify the actual DOM during pre-rendering.
pree logo