mayu-live / framework

Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby
https://mayu.live
GNU Affero General Public License v3.0
130 stars 4 forks source link

Prefetch stylesheets #44

Open aalin opened 1 year ago

aalin commented 1 year ago

Currently, when a new component renders, it will send the path of its stylesheet in the same patch set as the HTML for the component, which causes the styles to load after the component has been rendered, which causes flashing.

Since all stylesheets are per-component they are usually very small and could easily be prefetched.

It would be nice if it was possible to find all the CSS files for components used on a page so that the files on the current page could load first...

It is probably enough to just use fetch() and let the browser cache the response.

There is also CSS Module Scripts, but this syntax doesn't work in Firefox yet.

await import('/__mayu/static/7OuD0769LzoQV3qjke0rryI9fYFCJYUlpDlKKe9QCJs=.css', { assert: { type: 'css' } })

https://chromestatus.com/feature/5948572598009856