{"id":22782,"library":"vite-plugin-preload","title":"vite-plugin-preload","description":"Vite plugin that preloads all JS chunks and CSS stylesheets generated by dynamic imports (e.g., React.lazy) into the HTML entry point. As of v0.7.0, it automatically injects <link rel=\"modulepreload\"> and <link rel=\"stylesheet\"> tags for every chunk produced by code splitting, improving load performance by prefetching before the user navigates. It differs from manual chunking plugins by targeting framework-level lazy imports rather than Rollup's manualChunks. Released at a moderate cadence, it supports Vite 5+, TypeScript types out of the box, and offers options to filter chunks, choose preload vs prefetch mode, and generate a manifest JSON.","status":"active","version":"0.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/jarlef/vite-plugin-preload","tags":["javascript","vite","preload","plugin","bundle","typescript"],"install":[{"cmd":"npm install vite-plugin-preload","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-preload","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-preload","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin only works with Vite >= 5.0.0 as it hooks into Vite's build pipeline.","package":"vite","optional":false}],"imports":[{"note":"Default import only; named import 'preload' will be undefined. CJS require works via default export.","wrong":"const { preload } = require('vite-plugin-preload')","symbol":"default","correct":"import preload from 'vite-plugin-preload'"},{"note":"TypeScript users should use `import type` for type-only imports to avoid runtime side effects.","wrong":"import { PreloadOptions } from 'vite-plugin-preload'","symbol":"PreloadOptions","correct":"import type { PreloadOptions } from 'vite-plugin-preload'"},{"note":"CJS users: the default export is the function; no destructuring needed.","wrong":null,"symbol":"CommonJS require","correct":"const preload = require('vite-plugin-preload')"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport preload from 'vite-plugin-preload';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    preload({\n      includeJs: true,\n      includeCss: true,\n      mode: 'preload',\n    }),\n  ],\n});","lang":"javascript","description":"Demonstrates the minimum Vite config to enable preloading of all dynamically-loaded JS chunks and CSS."},"warnings":[{"fix":"Use dynamic imports for code splitting instead of manualChunks. Or consider using Vite's built-in manualChunks preloading.","message":"Plugin only processes chunks generated by dynamic imports (e.g., React.lazy), not manualChunks in Rollup. If you use manualChunks, the plugin will not add preload links for those chunks.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If you need immediate preloading, set mode to 'preload' (default).","message":"When mode is 'prefetch', links use rel=\"prefetch\" instead of rel=\"modulepreload\". Be aware that prefetch has lower priority and browser support differences.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Set format to false or provide a PrettierOptions object to control formatting.","message":"The `format` option applies Prettier formatting to the HTML output. It can cause unexpected line breaks or formatting if you have custom HTML template.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Implement a proper filter function that returns true for chunks you want to preload, e.g., (chunk) => chunk.fileName.endsWith('.js') && chunk.isDynamicEntry.","message":"The `shouldPreload` filter function receives chunk info; if not provided, all chunks are preloaded. Incorrect filter may exclude critical chunks.","severity":"gotcha","affected_versions":">=0.3.0"},{"fix":"Set `generatePreloadManifestJsonPath` to a file path to produce a JSON manifest of all preload links.","message":"If you use Vite's `build.manifest` option, the generated manifest may not include the preload links added by this plugin. Use `generatePreloadManifestJsonPath` to output a separate manifest.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install the package: npm install -D vite-plugin-preload. Ensure Vite >=5.0.0 is installed.","cause":"Package not installed or peer dependency Vite version mismatch.","error":"Error: Cannot find module 'vite-plugin-preload'"},{"fix":"Use default import: import preload from 'vite-plugin-preload'. Or in CJS: const preload = require('vite-plugin-preload').","cause":"Using named import instead of default import.","error":"TypeError: preload is not a function"},{"fix":"Upgrade to v0.7.0 or later: npm install vite-plugin-preload@latest. Check docs for options per version.","cause":"Using an outdated version of the plugin before includeJs was introduced.","error":"The option 'includeJs' is not recognized"},{"fix":"Only use this plugin in a Vite project. It must be placed in the Vite config's plugins array.","cause":"The plugin is not installed as a dev dependency or is being processed by a non-Vite build tool.","error":"Module parse failed: Unexpected token"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}