Skip to content
The <head> Observatory

/static/observatorio/en/astro/modulepreload/

Menu

HED-005 · Connections

<link rel="modulepreload">

The preload that speaks module: it fetches, parses and compiles in one go.

The preload variant for JavaScript modules: besides downloading the file, the browser parses and compiles it and places it in the module map, ready for import. It needs no as and no crossorigin — modules are always CORS, and the browser knows it.

It shines on deep graphs: without it, each module only reveals its imports after being fetched, and the tree descends as a waterfall, one round trip per level. Declaring the essential modules one by one flattens the waterfall — the specification lets the browser fetch dependencies too, but only the module pointed at is guaranteed.

<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/graficos.js">
Two modules of the graph, compiled before they are demanded.