vite-plugin-prebundle-src
v0.1.1
Published
📦 Vite plugin to prebundle source files
Downloads
6
Maintainers
Readme
vite-plugin-prebundle-src
Pre-bundle source files from your Vite app, just like Dependency Pre-Bundling.
Why
Performance
Bundle local entry files with many internal modules into a single file to enhance subsequent page loading performance.
Browser Cache
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.
Usage
Patch Vite
The plugin functionality relies on Vite's internal function getDepsOptimizer
, so you need to patch and export this function yourself. Reference: [email protected]
Tools for patching:
- pnpm: Use
pnpm patch
- Non-pnpm: Use
patch-package
Setup
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.
Which source files can be pre-bundled?
Infrequently changing source code files, such as utility functions, constants, configurations, etc.
How to update pre-bundled source files?
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.