vite-react-chunker

vite-react-chunker

vite-react-chunker is a Vite plugin that makes it easy to control chunk splitting and bundle optimization. It helps you define custom chunk strategies, improve caching, and boost performance for modern, high-performance web applications.

Features

• Flexible chunk splitting for vendor, framework, or custom modules
• Smarter caching through stable and predictable chunk names
• Reduce initial load time with optimized code splitting
• Compatible with TypeScript and modern frontend frameworks
• Works seamlessly with Vite’s build pipeline
• Zero-config setup with sensible defaults, extendable with custom rules

Installation

Using npm:

npm install vite-react-chunker --save-dev

Using Yarn:

yarn add vite-react-chunker -D

Usage

Add the plugin to your vite.config.js or vite.config.ts:

import { defineConfig } from "vite";
import chunk from "vite-react-chunker";

export default defineConfig({
  plugins: [
    chunk({
      strategy: "manual",
      customSplits: {
        vendor: ["react", "react-dom"],
        utils: ["lodash", "axios"],
      },
    }),
  ],
});

Configuration Options

Option	Type	Default	Description
strategy	string	"default"	Chunking strategy: "default", "manual", or "split-vendor"
customSplits	object	{}	Define manual chunk groups (e.g., vendor, utils, etc.)
enableDiagnostics	boolean	false	Enables detailed logs about chunking and performance metrics

Example Output

[vite-react-chunker] 📦 Splitting vendor chunk: react, react-dom
[vite-react-chunker] ✅ Generated 3 optimized chunks

License

MIT © [cent-fi]

Contributing

Have ideas or improvements? Contributions are welcome! Feel free to open an issue or submit a PR.