Bundling & splitting

Inlining the graph, extracting shared chunks, and keeping packages external.

Bundle

bundle inlines the whole graph into the output. Without it, each input file is merely converted.

guchho build src/app.js --bundle --outfile=dist/app.js

Two consequences worth knowing: external and alias only mean something when bundling, and using either without it is reported as an error, because there is no graph for them to act on.

Code splitting

splitting extracts code shared by several entry points into chunks that those entries import. It requires ES module output.

build: {
  entry: ['src/a.js', 'src/b.js'],
  outdir: 'dist',
  format: 'esm',
  splitting: true,
}

External packages

external keeps the named paths out of the graph and leaves the import statement in the output:

guchho build src/app.js --bundle --external:react --external:react-dom

packages is the package-wide switch: bundle (default) or external.

Aliasing

alias redirects a specifier before resolution starts:

build: {
  alias: { '@': './src', 'lodash': 'lodash-es' },
}

Choosing an entry export

exports selects the value the bundle exposes:

All four are read for every output format. See Formats.

Output names

Output file names are built from the [dir], [name], [hash] and [ext] placeholders:

build: {
  entryNames: '[name]-[hash]',
  chunkNames: 'chunks/[name]-[hash]',
  assetNames: 'assets/[name]-[hash]',
}

Edit this page on GitHub