Как готовить файлы для production?

1 апреля 2025 года в рамках конференции “AlmatyJS Light #6” я представил доклад о том, что нужно сделать с файлами перед отправкой их на production к пользователям.

В презентации я рассмотрел основные аспекты оптимизации файлов для production, такие как:

• Оптимизация размеров HTML, CSS и JavaScript файлов, хоть и упомянул это вскользь, потому как чаще всего все оптимизации готовы на стороне bundler-а;
• Оптимизация изображений: выбор формата изображений (webp или avif) и дал общие рекомендации по работе с изображениями в проекте;
• Оптимизация шрифтов: выбор шрифта и чем woff2 лучше, чем любой другой формат шрифта в 2025, а также пара советов как сэкономить на спичках в шрифтах;
• Оптимизация SVG: использование спрайтов и чем они лучше любых других вариантов подключения SVG-иконок к странице.

В докладе я говорил о том, что для спрайтов и отдельных SVG-файлов я писал конфиг для webpack, который позволяет сжимать иконки эффективно. В моём случае всё было реализовано на Next.js 14, его конфиг и прикреплю ниже:

const spritePlugins = [
  'cleanupAttrs',
  'cleanupEnableBackground',
  'cleanupListOfValues',
  'cleanupNumericValues',
  'collapseGroups',
  'removeUselessStrokeAndFill',
  'removeNonInheritableGroupAttrs',
  'removeEmptyAttrs',
  'removeEmptyContainers',
  'removeEmptyText',
  'removeMetadata',
  'removeComments',
  'removeDesc',
  'mergeStyles',
  'minifyStyles',
  'convertEllipseToCircle',
  'convertOneStopGradients',
  'convertPathData',
  'convertShapeToPath',
  'convertStyleToAttrs',
  'removeXMLProcInst',
];

const svgFilesPlugins = [
  'cleanupAttrs',
  'cleanupEnableBackground',
  'cleanupListOfValues',
  'cleanupNumericValues',
  'collapseGroups',
  'removeUselessStrokeAndFill',
  'removeNonInheritableGroupAttrs',
  'removeEmptyAttrs',
  'removeEmptyContainers',
  'removeEmptyText',
  'removeMetadata',
  'removeComments',
  'removeDesc',
  'mergeStyles',
  'minifyStyles',
  'convertEllipseToCircle',
  'convertOneStopGradients',
  'convertPathData',
  'convertShapeToPath',
  'convertStyleToAttrs',
  'cleanupIds',
  'convertColors',
  'moveElemsAttrsToGroup',
  'removeDimensions',
  'removeDoctype',
  'removeEditorsNSData',
  'removeHiddenElems',
  'removeTitle',
  'removeUselessDefs',
];

webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    oneOf: [
      {
        test: /\.sprite\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'static/media/[name].[hash].[ext]',
            },
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: spritePlugins,
            },
          },
        ],
      },
      {
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'static/media/[name].[hash].[ext]',
            },
          },
          {
            loader: 'svgo-loader',
            options: {
              plugins: svgFilesPlugins,
            },
          },
        ],
      },
    ],
  });

  return config;
}

Презентация и дополнительные материалы доступны по ссылкам ниже.