Registry / web-framework / vite-plugin-bundle-prefetch

vite-plugin-bundle-prefetch

library0.0.4jsnpmunverified

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.

web-framework

npm install vite-plugin-bundle-prefetch

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-BUNDLE

vite-plugin-bundle-prefetch

web-frameworkjavascriptv0.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

prefetchPlugin

✓ import prefetchPlugin from 'vite-plugin-bundle-prefetch'

✗ const prefetchPlugin = require('vite-plugin-bundle-prefetch')

Default export; ESM-only, CJS require will throw. Plugin is a function, not an object.

Options

✓ import type { Options } from 'vite-plugin-bundle-prefetch'

✗ import { Options } from 'vite-plugin-bundle-prefetch'

Options type is a TypeScript type, imported as type only. Do not use runtime import.

UserConfig

✓ import { defineConfig, UserConfig } from 'vite'; // then use prefetchPlugin in plugins array

✗ import prefetchPlugin from 'vite-plugin-bundle-prefetch/prefetchPlugin'

No subpath exports; always import from main package.

Minimal Vite config adding prefetch for all built JavaScript chunks, excluding source maps and legacy bundles.

// vite.config.ts import { defineConfig } from 'vite'; import prefetchPlugin from 'vite-plugin-bundle-prefetch'; export default defineConfig({ plugins: [ prefetchPlugin({ excludeFn: (assetName: string) => assetName.includes('.map') || assetName.includes('legacy'), }), ], }); // Build with `vite build`; output HTML will have <link rel="prefetch" href="/assets/chunk-xxx.js"> for all chunks.

Debug

Known issues

gotchaPlugin only works during build (vite build), not dev server. Prefetch links will not appear in dev mode.

fix

Run vite build to see prefetch links in output HTML.

affects: >=0.0.1

gotchaexcludeFn default is undefined, meaning no files are excluded; all bundle files (including .map) may get prefetched if not filtered.

fix

Provide excludeFn to skip .map files and legacy builds: excludeFn: (name) => name.includes('.map') || name.includes('legacy')

affects: >=0.0.1

gotchaPlugin does not deduplicate prefetch links; if multiple plugins or manual links exist, duplicates may appear.

fix

Manually ensure no other prefetch links are added, or use transformIndexHtml hook to deduplicate.

affects: >=0.0.1

Errors

Common errors & fixes

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.

CJS require() used on ESM-only package.

fix

Change vite.config.js extension to .mjs or add type: 'module' in package.json, then use import prefetchPlugin from 'vite-plugin-bundle-prefetch'

TypeError: prefetchPlugin is not a function

Importing the plugin incorrectly (e.g., using import { prefetchPlugin } or incorrect destructuring).

fix

Use default import: import prefetchPlugin from 'vite-plugin-bundle-prefetch' (no curly braces)

Upgrade

Version history

0.0.4latest on npm

Audit

Dependencies

viteoptionalpeer dependency; plugin is Vite-specific and uses Vite's plugin hooks

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dreambo8563/vite-plugin-bundle-prefetch ↗

packagehttps://www.npmjs.com/package/vite-plugin-bundle-prefetch ↗