Esbuild-plugin-entry-chunks NPM

esbuild-plugin-entry-chunks

Esbuild plugin to compose entryPoints as chunks

Status

PoC

Problem

Esbuild provides code-splitting with dynamic imports to reuse common code chunks of several entries. This plugin has similar functionality, but: 1. Bounds parts in static form. 2. Composes entryPoints bundles as chunks without extracting common parts.

This is kind of workaround for the missing manual-chunks API.

Practical case

For example, if a package has two entry points — index.js and cli.js — the last bundle will use index.js as a dependency without duplicating its contents.

Usage

import { build, BuildOptions } from 'esbuild'
import { entryChunksPlugin } from 'esbuild-plugin-entry-chunks'

const plugin = entryChunksPlugin()
const config: BuildOptions = {
  entryPoints: [
    'a.ts',
    'b.ts',
    'c.ts',
  ],
  plugins: [plugin],
  external: ['node:*'],
  bundle: true,
  minify: false,
  sourcemap: false,
  format: 'esm',
  allowOverwrite: true,
}

await build(config)

Inputs:

// a.ts -----------------
export * from './b'
export const a = 'a'

// b.ts -----------------
export * from './c'
export const b = 'b'

// c.ts -----------------
export * from './d'
export const c = 'c'

// d.ts -----------------
export * from './e'
export const d = 'd'

// e.ts -----------------
import * as fs from 'node:fs'
export const e = 'e'
export const rf = fs.readFile

Outputs:

// a.js -----------------
// a.ts
export * from "./b.js";
var a = "a";
export {
  a
};

// b.js -----------------
// b.ts
export * from "./c.js";
var b = "b";
export {
  b
};

// c.js -----------------
// e.ts
import * as fs from "node:fs";
var e = "e";
var rf = fs.readFile;

// d.ts
var d = "d";

// c.ts
var c = "c";
export {
  c,
  d,
  e,
  rf
};