{"id":22136,"library":"rollup-plugin-modulepreload","title":"rollup-plugin-modulepreload","description":"Rollup plugin that adds modulepreload link tags to HTML files for dynamically imported chunks, improving loading performance by hinting the browser to preload ES modules before they are needed. Current version 2.0.0 (released 2021, maintained). Allows customization of which chunks to preload via a synchronous or asynchronous predicate, with default that preloads dynamic entry points and intermediate chunks with exports. Differentiates from generic HTML injectors by focusing specifically on modulepreload semantics and Rollup's chunk metadata.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/bennypowers/rollup-plugin-modulepreload","tags":["javascript","rollup","code splitting","performance","typescript"],"install":[{"cmd":"npm install rollup-plugin-modulepreload","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-modulepreload","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-modulepreload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for plugin interface","package":"rollup","optional":false}],"imports":[{"note":"The plugin is exported as a default function, not a named export.","symbol":"modulepreload","correct":"import modulepreload from 'rollup-plugin-modulepreload'"},{"note":"In CommonJS, the default export is under .default property.","wrong":"const modulepreload = require('rollup-plugin-modulepreload')","symbol":"modulepreload","correct":"const modulepreload = require('rollup-plugin-modulepreload').default"},{"note":"TypeScript types are shipped and include an Options interface.","symbol":"type Options","correct":"import type { Options } from 'rollup-plugin-modulepreload'"}],"quickstart":{"code":"import modulepreload from 'rollup-plugin-modulepreload';\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    dir: 'public/modules',\n    format: 'es',\n    entryFileNames: '[name]-[hash].js',\n    chunkFileNames: 'chunk-[hash].js',\n  },\n  plugins: [\n    modulepreload({\n      prefix: 'modules',\n      index: 'public/index.html',\n    })\n  ]\n};","lang":"typescript","description":"Demonstrates basic usage with Rollup config: sets up modulepreload for all chunks, writes <link modulepreload> tags into public/index.html."},"warnings":[{"fix":"Provide an index path (relative to project root) or use output.dir and ensure index exists.","message":"If the index option is not specified, the plugin still runs but does not inject anything into an HTML file. It only works if the output.dir is set.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Override shouldPreload to restrict to certain chunks based on your app's structure.","message":"The default predicate preloads chunks with exports and no facadeModuleId (intermediate chunks), which may include many internal chunks that are never directly imported. This can increase link tag count and network requests.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Explicitly set prefix to a URL path (e.g., 'modules') that matches where chunks are served from.","message":"The prefix option defaults to output.dir, which may not be a web-accessible path. If output.dir is absolute or relative, the link href may be incorrect.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use synchronous predicate if possible, or cache file reads.","message":"Asynchronous shouldPreload functions can cause the plugin to run slower because they are awaited for each chunk. Ensure your async predicate is performant.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install rollup-plugin-modulepreload --save-dev","cause":"Package not installed or not in node_modules.","error":"Error: Could not resolve 'rollup-plugin-modulepreload'"},{"fix":"Use const modulepreload = require('rollup-plugin-modulepreload').default","cause":"CommonJS require without .default because the export is a default export.","error":"TypeError: modulepreload is not a function"},{"fix":"Ensure the index file exists and the path is relative to the project root (not the output directory).","cause":"The index option points to a non-existent or unreadable file.","error":"Error: [rollup-plugin-modulepreload] Could not read index.html at path '...'"},{"fix":"Add output.dir to your Rollup output options.","cause":"The plugin requires output.dir to be set in Rollup config.","error":"Error: [rollup-plugin-modulepreload] No output directory specified. Please set output.dir or output.preserveModules"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}