module Roda::RodaPlugins::AssetsPreloading

The assets_preloading plugin generates html tags or a header value to facilitate browser preloading of your assets. This allows compatible browsers to fetch assets before they are required, streamlining page rendering.

For a list of compatible browsers, see caniuse.com/#search=link-rel-preload

The plugin provides two functions - preload_assets_link_header and preload_assets_link_tags. The resulting preloading should be identical, it is up to you which system you prefer.

preload_assets_link_header returns a string suitable for populating the response Link header:

response.headers['Link'] = preload_assets_link_header(:css)
# Link header will now contain something like:
# </assets/app.css>;rel="preload";as="style"

preload_assets_link_tags returns a string to drop into your templates containing link tags:

preload_assets_link_tags(:css)
# returns <link href="/assets/app.css" rel="preload" as="style">

Note that these link tags are different to the usual asset declarations in markup; this will only instruct a compatible browser to fetch the file and cache it for later; the browser will not parse the asset until it encounters a traditional link or script tag.

You must still setup and link to your assets as you did previously.

Both functions can be passed any combination of asset types or asset groups, as multiple arguments:

# generate tags for css assets and the app js asset group
preload_assets_link_tags(:css, [:js, :app], [:js, :bar])

# generate Link header for css assets and js asset groups app and bar
preload_assets_link_header(:css, [:js, :app])

Methods

Public Class

1. load_dependencies

Classes and Modules

1. Roda::RodaPlugins::AssetsPreloading::InstanceMethods