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: vite@5.0.11.patch

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?

1. When the Vite dev server starts, it automatically listens to the specified source files. When changes occur, it automatically rebuilds source files.

2. Restart the Vite dev server with the --force option to rebuild source files.

License

MIT License © 2024-PRESENT Tycho