Вбудовування зображень і шрифтів у CSS за допомогою Webpack Encore
Дата оновлення перекладу 2024-05-29
Вбудовування зображень і шрифтів у 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. Ви можете прочитати більше про це і про конфігурацію там.