Pre-bundle source files from your Vite app, just like Dependency Pre-Bundling.
Bundle local entry files with many internal modules into a single file to enhance subsequent page loading performance.
Pre-bundled source code requests are strongly cached w/ HTTP headers max-age=31536000, immutable
to improve page reload performance during dev. Once cached, these requests will never hit the dev server again.
The plugin functionality relies on Vite's internal function getDepsOptimizer
, so you need to patch and export this function yourself. Reference: vite@5.0.11.patch
Tools for patching:
- pnpm: Use
pnpm patch
- Non-pnpm: Use
patch-package
Example project: playground
Install vite-plugin-prebundle-src
:
npm i -D vite-plugin-prebundle-src
Use the Vite plugin:
// vite.config.js
import { defineConfig, getDepsOptimizer } from 'vite';
import prebundleSrc from 'vite-plugin-prebundle-src';
export default defineConfig({
plugins: [
prebundleSrc(
// retrieve from your patched version of Vite
getDepsOptimizer,
{
files: ['src/utils/**/*.ts'],
ignore: ['src/utils/bar/a.ts'],
}
// or use multiple options
// [
// {
// files: ['src/utils/foo/**/*.ts'],
// },
// {
// files: ['src/utils/bar/**/*.ts'],
// ignore: ['src/utils/bar/a.ts'],
// },
// ]
),
],
});
The files can be direct file names or glob patterns using fast-glob.
Infrequently changing source code files, such as utility functions, constants, configurations, etc.
-
When the Vite dev server starts, it automatically listens to the specified source files. When changes occur, it automatically rebuilds source files.
-
Restart the Vite dev server with the
--force
option to rebuild source files.