rollup-plugin-modulepreload
Rollup plugin to add modulepreload links from generated chunks. Users may customize which chunks are preloaded using the shouldPreload option.
Usage
import config from './rollup.config.rest.js'
import modulepreload from 'rollup-plugin-modulepreload';
export default {
plugins: [
modulepreload({
prefix: 'modules',
index: 'public/index.html',
})
]
}This will write something like the following to the <head> of index.html
<link rel="modulepreload" href="modules/chunk-47ckl37a.js">Options
| Name | Accepts | Default |
|---|---|---|
index |
Path to index.html to modify. | undefined |
prefix |
Path to prepend to chunk filenames in link tag href attribute. |
your bundle's dir option |
shouldPreload |
Predicate which takes a ChunkInfo
|
Default predicate |
Determining Which Chunks to Preload
You can customize the function which determines whether or not to preload a chunk by passing a shouldPreload predicate, which takes a ChunkInfo object.
It can be synchronous:
function shouldPreload({ code }) {
return !!code && code.includes('INCLUDE THIS CHUNK');
}
export default {
input: 'src/index.js',
plugins: [
modulepreload({
index: 'public/index.html',
prefix: 'modules',
shouldPreload,
})
]
}or asynchronous:
import { readFile } from 'fs/promises'; // node ^14
async function shouldPreload(chunk) {
if (!chunk.facadeModuleId)
return false;
const file =
await readFile(chunk.facadeModuleId, 'utf-8');
return file.includes('INCLUDE THIS CHUNK');
}
export default {
input: 'src/index.js',
plugins: [
modulepreload({
index: 'public/index.html',
prefix: 'modules',
shouldPreload,
})
]
}The Default Predicate is :
const defaultShouldPreload =
({ exports, facadeModuleId, isDynamicEntry }) =>
!!(
// preload dynamically imported chunks
isDynamicEntry ||
// preload generated intermediate chunks
(exports && exports.length && !facadeModuleId)
);