Optimization

File hashing

Use the bud.hash function to generate a hash for each file in the bundle. This hash will be added to outputted files.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.hash()
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.hash()
}

YML

bud.config.yml

hash: true

JSON

bud.config.json

{
  "hash": true
}

Minimizing code

Use the bud.minimize function to run your application code through a minifier.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.minimize()
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.minimize()
}

YML

bud.config.yml

minimize: true

JSON

bud.config.json

{
  "minimize": true
}

Creating a runtime

You may create an application runtime using bud.runtime. Using the single option is probably the simplest and best solution for most applications (and is also the default):

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.runtime()
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.runtime()
}

YML

bud.config.yml

runtime: true

JSON

bud.config.json

{
  "runtime": true
}

Creating a vendor chunk

Use dynamic imports

You should use dynamic imports to split your code into chunks that can be loaded on demand. This gives you more control over how your code is loaded and can improve performance.

You can perform general code splitting with bud.splitChunks.

TS

bud.config.ts

import type {Bud} from '@roots/bud'

export default async (bud: Bud) => {
  bud.splitChunks()
}

JS

bud.config.js

/** @param {import('@roots/bud').Bud} bud */
export default async (bud) => {
  bud.splitChunks()
}

YML

bud.config.yml

splitChunks: true

JSON

bud.config.json

{
  "splitChunks": true
}

Optimizing images

You can optimize images using the @roots/bud-imagemin extension.

npm

npm install @roots/bud-imagemin --save-dev

Yarn

yarn add @roots/bud-imagemin --dev

pnpm

pnpm add @roots/bud-imagemin --save-dev