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.

Detail:

• svg: The threshold of the SVG image.
• font: The threshold of the font file.
• image: The threshold of non-SVG images.
• media: The threshold of media assets such as videos.
• assets: The threshold of other static assets. Such as the assets defined in Extend Asset Types.

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,
    },
  },
};