v147 · HTML · Modules
Compatibility Lab
Detects as="json" and as="style" support on <link rel="modulepreload"> by checking attribute reflection and injecting a live preload link. Compares the native hint against the fetch() + URL.createObjectURL() manual pre-parsing fallback. Provides detection patterns for both resource types.
API probes
Live attribute test
link[rel=modulepreload] attribute reflection
Click "Run probe" to inspect modulepreload attributes…
as= value support matrix
| as= value | Chrome 66+ | Chrome 147+ | Notes |
|---|---|---|---|
| as="script" | ✓ | ✓ | Default. ES modules. |
| as="json" | ✗ | ✓ | JSON modules. Chrome 147. |
| as="style" | ✗ | ✓ | CSS modules. Chrome 147. |
| as="worker" | ✗ | ✗ | Not yet standardised. |
Spec contract lab
The Chrome 147 change adds as="json" and as="style" to rel="modulepreload". This panel keeps the module-only JSON rule visible and shows the mismatches that make a preload miss the later import.
Fallback pattern
/* Detect modulepreload as= support */
function supportsModulepreloadAs(asType) {
const link = document.createElement('link');
link.rel = 'modulepreload';
link.as = asType;
// If the browser normalises/rejects the value, it will be empty or "script"
return link.as === asType;
}
const HAS_JSON_PRELOAD = supportsModulepreloadAs('json');
const HAS_STYLE_PRELOAD = supportsModulepreloadAs('style');
/* Progressive enhancement: add preload hints at runtime */
function preloadModule(href, asType) {
if (asType === 'json' && !HAS_JSON_PRELOAD) return preloadFetch(href);
if (asType === 'style' && !HAS_STYLE_PRELOAD) return preloadFetch(href);
const link = document.createElement('link');
link.rel = 'modulepreload';
link.as = asType;
link.href = href;
document.head.appendChild(link);
}
/* Fallback: fetch + cache pre-parsing */
function preloadFetch(href) {
return fetch(href, {
mode: 'cors',
credentials: 'same-origin',
cache: 'force-cache',
}).catch(() => {}); // silently pre-warms the cache
}
/* Usage */
if (HAS_JSON_PRELOAD) {
// Native: browser parses the JSON module before import() runs
//
} else {
// Fallback: manually pre-fetch the URL into HTTP cache
preloadFetch('./data.json');
}
References
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗