{"id":22598,"library":"vite-plugin-bundle-prefetch","title":"vite-plugin-bundle-prefetch","description":"Vite plugin that automatically adds <link rel=\"prefetch\"> tags to HTML output for all JavaScript chunks bundled in Vite builds. Current version 0.0.4 (beta, infrequent releases). The plugin scans the output directory for bundles, filters map files and legacy builds, then injects prefetch links into the final index.html. It addresses a gap where Vite's built-in preload only handles initial page loads, not prefetching for later navigation. Differentiates from similar tools like vite-plugin-prefetch by being minimal and focused on bundle-based prefetching. Works only with Vite; no support for rollup standalone or custom SSR pipelines.","status":"active","version":"0.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/dreambo8563/vite-plugin-bundle-prefetch","tags":["javascript","vite-plugin","prefetch","typescript"],"install":[{"cmd":"npm install vite-plugin-bundle-prefetch","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-bundle-prefetch","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-bundle-prefetch","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin is Vite-specific and uses Vite's plugin hooks","package":"vite","optional":true}],"imports":[{"note":"Default export; ESM-only, CJS require will throw. Plugin is a function, not an object.","wrong":"const prefetchPlugin = require('vite-plugin-bundle-prefetch')","symbol":"prefetchPlugin","correct":"import prefetchPlugin from 'vite-plugin-bundle-prefetch'"},{"note":"Options type is a TypeScript type, imported as type only. Do not use runtime import.","wrong":"import { Options } from 'vite-plugin-bundle-prefetch'","symbol":"Options","correct":"import type { Options } from 'vite-plugin-bundle-prefetch'"},{"note":"No subpath exports; always import from main package.","wrong":"import prefetchPlugin from 'vite-plugin-bundle-prefetch/prefetchPlugin'","symbol":"UserConfig","correct":"import { defineConfig, UserConfig } from 'vite'; \n// then use prefetchPlugin in plugins array"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport prefetchPlugin from 'vite-plugin-bundle-prefetch';\n\nexport default defineConfig({\n  plugins: [\n    prefetchPlugin({\n      excludeFn: (assetName: string) => assetName.includes('.map') || assetName.includes('legacy'),\n    }),\n  ],\n});\n// Build with `vite build`; output HTML will have <link rel=\"prefetch\" href=\"/assets/chunk-xxx.js\"> for all chunks.","lang":"typescript","description":"Minimal Vite config adding prefetch for all built JavaScript chunks, excluding source maps and legacy bundles."},"warnings":[{"fix":"Run vite build to see prefetch links in output HTML.","message":"Plugin only works during build (vite build), not dev server. Prefetch links will not appear in dev mode.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Provide excludeFn to skip .map files and legacy builds: excludeFn: (name) => name.includes('.map') || name.includes('legacy')","message":"excludeFn default is undefined, meaning no files are excluded; all bundle files (including .map) may get prefetched if not filtered.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Manually ensure no other prefetch links are added, or use transformIndexHtml hook to deduplicate.","message":"Plugin does not deduplicate prefetch links; if multiple plugins or manual links exist, duplicates may appear.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Change vite.config.js extension to .mjs or add type: 'module' in package.json, then use import prefetchPlugin from 'vite-plugin-bundle-prefetch'","cause":"CJS require() used on ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/vite-plugin-bundle-prefetch/dist/index.mjs from /path/to/vite.config.js not supported."},{"fix":"Use default import: import prefetchPlugin from 'vite-plugin-bundle-prefetch' (no curly braces)","cause":"Importing the plugin incorrectly (e.g., using import { prefetchPlugin } or incorrect destructuring).","error":"TypeError: prefetchPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}