Design for generating preload directives with the help of Vite #337
Replies: 1 comment
-
|
Update: I added a first pass at this design for letting the user customize which files to add preload tags for (or even customize the preload tags themselves). dillonkearns/elm-pages-v3-beta@6bf1881 For example, you can add preload directives for JS, preloadTagForFile(file) {
return !file.endsWith(".css");
},For the docs site, this results in these preload tags: <head>
<meta charset="UTF-8" />
<title>elm-pages - a statically typed site generator</title>
<link rel="modulepreload" crossorigin href="/elm.d4eb5085.js">
<link rel="modulepreload" crossorigin href="/assets/index.b05ada09.js">
<link rel="preload" href="/assets/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.9eb6b9b5.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/-F63fjptAgt5VM-kVkqdyU8n1isq129k.70363d6e.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.bda45ab6.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.71b6d0c4.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.0ae9b077.woff2" as="font" type="font/woff2" crossorigin>
<!-- end of preload tags -->
<script defer src="/elm.d4eb5085.js" type="text/javascript"></script>
<!-- ... -->If you return a string from I'm also passing through the I'd love to hear any feedback if there are any use cases that should be considered that might not be supported, or if there are any defaults that there is a good reason to consider changing. For example, right now the default I have if you don't define I've also considered whether you should be able to add a precedence to give an ordering to the preload directives. So you could return something like |
Beta Was this translation helpful? Give feedback.
-
Vite provides some hooks for framework authors to generate preload directives. Here's an example of their source code for doing that: https://github.com/vitejs/vite/blob/1358a3c75bfa1d6e72aa8d98dd0e1f70662c8056/playground/ssr-vue/src/entry-server.js#L50
Docs are here: https://vitejs.dev/guide/ssr.html#generating-preload-directives
There's not a clear path for exposing that to user's of the framework, but I have some ideas on how to do that. Generating preloads
It looks like Vue is exploring this here: vitejs/vite#5991
And there is a related Vite issue: vitejs/vite#5991
I haven't wrapped my head around that Vite functionality yet, but one of the things I saw floating around in those discussions was the idea of providing a directive that Vite preprocesses to know whether to include a preload or not, like
import.meta.preload().So this is something that needs to be explored. Are the tools that Vite provides now sufficient? Is there anything that the elm-pages framework needs to do to integrate that?
Another design direction I considered was providing a hook in the
elm-pages.config.mjsfile to control which files to include preload directives for (and customize them):I think something like that could work, but it is a little cumbersome, and if Vite has a way to customize preloads then it would be ideal to use that functionality instead. Some research is needed here to understand this better.
Beta Was this translation helpful? Give feedback.
All reactions