Вбудовування зображень і шрифтів у 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 - значення за замовчуванням 8kb
    })

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

Для цього використовуються модулі Webpack Asset Modules. Ви можете прочитати більше про це і про конфігурацію там.