Блог

Я добавил следующую конфигурацию загрузки:

 config.module.rules.unshift({
  test: /.svg$/,
  use: {
    loader: 'file-loader',
    options: {
      esModule: false,
      name: '[name]-[hash].[ext]',
      outputPath: 'static/images',
    },
  },
});

  

Это генерирует ожидаемые файлы:

 ❯ ls -l .next/static/images/*-*.svg
-rw-r--r--  1 gajus  staff  2755 Oct 11 19:05 .next/static/images/BAGEL-c8eb9c0fab3c81a8ce2ca37b91e45447.svg
-rw-r--r--  1 gajus  staff  1399 Oct 11 19:05 .next/static/images/CARROT-6f210c93ab8a1dffb7613368a5cbb5fe.svg
-rw-r--r--  1 gajus  staff  1223 Oct 11 19:05 .next/static/images/CHOCOLATE_BAR-26d9835f780bee61f42a772bcc4b0358.svg
-rw-r--r--  1 gajus  staff  1643 Oct 11 19:05 .next/static/images/COOKIE-dc51bfc82c7bec0bc39a79de154027d2.svg
-rw-r--r--  1 gajus  staff  1779 Oct 11 19:05 .next/static/images/CROISSANT-fbbd24736806af790ed7b7eff9c29ce5.svg
-rw-r--r--  1 gajus  staff  4255 Oct 11 19:05 .next/static/images/DOUGHNUT-9cd981749f95b790e0c14fdd24189117.svg
-rw-r--r--  1 gajus  staff  1275 Oct 11 19:05 .next/static/images/MANGO-6318f4f9015e40d8d2177b299afc7563.svg
-rw-r--r--  1 gajus  staff   639 Oct 11 19:05 .next/static/images/RED_APPLE-9ad3d18099978a24a614c5f58a8d198b.svg
-rw-r--r--  1 gajus  staff  1975 Oct 11 19:05 .next/static/images/SHORTCAKE-cb1521d4a45c8e4b808d6309fbc4690c.svg

  

Однако фактические изображения содержат содержимое в кодировке base64, например

 cat .next/static/images/BAGEL-c8eb9c0fab3c81a8ce2ca37b91e45447.svg | head -c 100
export default "data:image/svg xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzYgMzYiIHhtbG5zPSJodHRwOi8vd3d3L

  

Это не совсем то, что я искал, но мне удалось просто отключить url-loader .

 const imageRule = config.module.rules.find((rule) => {
  return String(rule.test) === String(/.(jpe?g|png|svg|gif)$/i);
});

if (!imageRule) {
  throw new Error('Unexpected state');
}

const fallback = imageRule.oneOf[imageRule.oneOf.length - 1];

if (fallback.resourceQuery) {
  throw new Error('Unexpected state');
}

const urlLoader = fallback.use[0];

if (urlLoader.loader !== 'url-loader') {
  throw new Error('Unexpected state');
}

  

Логика отключения url-loader изображений заключается в том, что они редко являются частью критически важного пользовательского интерфейса, а такие технологии, как HTTP2, упрощают параллельную загрузку этих ресурсов.

Я поднял вопрос, есть ли лучший способ сделать это https://github.com/vercel/next.js/issues/17804 .