Встраивание изображений и шрифтов в CSS с Webpack Encore

Простая техника, улучшающая производительность веб-приложения, - уменьшение количества HTTP-запросов, встраивающих маленькие файлы в виде URL, зашифрованных base64, в сгенерированные CSS-файлы.

Вы можете включить это в webpack.config.js для изображений и/или шрифтов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// webpack.config.js
// ...

Encore
    // ...
    .configureImageRule({
        // сообщите Webpack, что он должен рассмотреть встраивание
        type: 'asset',
        //maxSize: 4 * 1024, // 4 kb - the default is 8kb
    })

    .configureFontRule({
        type: 'asset',
        //maxSize: 4 * 1024
    })
;

Это использует преимущества Модулей ресурсов Webpack. Вы можете прочесть больше об это и конфигурации там.