Skip to main content

Dynamic imports

Dynamic imports are a great way to keep bundle size minimal for users. A dynamic import looks like this:

app.js
export const caller = async () => {
  const component = await import('./component')
  component.doThing()
}

bud.js fully supports dynamic imports. However, if you are serving assets from a non-root URL, you will need to to set the public path.

Setting with bud.setPublicPath​

The most straight-forward way to set it is using bud.setPublicPath.

Example for @roots/sage users:

bud.config.mjs
bud.setPublicPath('/app/themes/sage/public/')

Setting with bud.entry​

You may also set the public path using bud.entry:

bud.config.mjs
bud.entry({
  app: {
    import: ['@src/app.js', '@src/app.css'],
    publicPath: '/app/themes/sage/public/',
  },
})

Setting with envvar​

If you set the APP_PUBLIC_PATH envvar you don't need to call anything in bud.config.js. It will be set for your automatically.