#output.dataUriLimit

• Type:

type DataUriLimit =
  | number
  | {
      svg?: number;
      font?: number;
      image?: number;
      media?: number;
      assets?: number;
    };

• Default:

const defaultDatUriLimit = {
  svg: 4096,
  font: 4096,
  image: 4096,
  media: 4096,
  assets: 4096,
};

Set the size threshold to inline static assets such as images and fonts.

By default, static assets will be Base64 encoded and inline into the page if the size is less than 4KiB.

You can adjust the threshold by setting the dataUriLimit config.

Details:

• svg: The threshold for SVG images.
• font: The threshold for font files.
• image: The threshold for non-SVG images.
• media: The threshold for media assets such as videos.
• assets: The threshold for other static assets, such as those defined in Extend Asset Types.

See Inline static assets for more details.

#Example

• Inline all static assets less than 10KiB:

export default {
  output: {
    dataUriLimit: 10 * 1024,
  },
};

• Disable inlining of static assets:

export default {
  output: {
    dataUriLimit: 0,
  },
};

• Inline all static assets:

export default {
  output: {
    dataUriLimit: Number.MAX_SAFE_INTEGER,
  },
};

• Set the threshold for image assets to 5KiB, do not inline video assets:

export default {
  output: {
    dataUriLimit: {
      image: 5 * 1024,
      media: 0,
    },
  },
};