Prevent embedding small assets into HTML file

Question

By default, Gatsby (properly also related to Webpack) will embed assets that are small enough into the HTML files in base64 encoding. I would like to prevent that from happening.

Is there an option from Gatsby that I can configure? Like something similar to IMAGE_INLINE_SIZE_LIMIT from CRA.

Alternatively, if the above is not possible, which Webpack config (it is related to Webpack, right?) should I modify to achieve what I'm looking for?

Answer 1

As mentioned in the comments, dataUrlCondition probably is what you are looking for.

exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }) => {
  const config = getConfig();

  actions.setWebpackConfig({
    module: {
      rules: [
        {
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024,
            },
          },
        },
      ],
    },
  });
};

Gatsby ships with his own webpack configuration but you can customize it using onCreateWebpackConfig API in your gatsby-node.js.

Regarding the parser, if a module source size is less than maxSize then it will be injected into the bundle as a Base64-encoded string, otherwise, the module-file will be emitted into the output directory.