Rollup plugin to add modulepreload links from generated chunks.
MIT License
Rollup plugin to add modulepreload links from generated chunks. Users may customize which chunks are preloaded using the shouldPreload
option.
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">
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 |
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)
);