output.dataUriLimit#

• Type:

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

• Default:

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

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 10KB.

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.

Example#

• Inline all static assets less than 4kB:

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

• 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 5kB, do not inline video assets:

export default {
  output: {
    dataUriLimit: {
      image: 5000,
      media: 0,
    },
  },
};