Почему при сборке prod фронтенда с помощью webpack encore пересоздаются неизменённые svg файлы?

При сборке фронтенда с помощью Webpack Encore в режиме "prod" все файлы (включая SVG) обрабатываются с целью оптимизации и минификации. К сожалению, в некоторых случаях это приводит к пересозданию даже неизмененных SVG файлов.

Проблема заключается в том, что Webpack Encore не проводит проверку контента SVG файлов, чтобы определить, изменился ли он или нет. Вместо этого, Webpack Encore основывается исключительно на временной метке изменения файла. Если временная метка изменения файла отличается от предыдущей сборки, Webpack Encore решает, что файл был изменен и пересоздает его.

Для решения этой проблемы можно воспользоваться двумя подходами:

1. Отключение оптимизации и минификации для SVG файлов. В файле webpack.config.js можно добавить специальную настройку для отключения обработки определенных типов файлов, включая SVG:

Encore
    //...
    .configureImageRule({
        options: {
            imagemin: false
        }
    })

Таким образом, SVG файлы больше не будут обрабатываться и пересоздаваться при сборке фронтенда.

2. Использование кастомного лоадера для SVG файлов. Вместо использования стандартного Encore правила для файлов изображений, можно создать свой собственный лоадер, который будет основываться на содержимом файла, а не на его временной метке.

const svgRule = Encore.getRule('svg');
svgRule.uses.clear();
svgRule.use('file-loader')
    .loader('file-loader')
    .options({
        name: '[name].[hash:8].[ext]',
        outputPath: 'images/',
        publicPath: '/build/images/',
        esModule: false
    });

При использовании этого подхода, Webpack Encore будет проверять содержимое SVG файла, и если оно не изменилось, файл не будет пересоздан при сборке.

Оба эти подхода помогут решить проблему с пересозданием неизмененных SVG файлов при сборке фронтенда с помощью Webpack Encore в режиме "prod".