在 CSS 中使用 Webpack Encore 内联图像和字体

编辑此页

提高 Web 应用程序性能的一个简单技术是减少 HTTP 请求的数量，将小文件以内联方式作为 base64 编码的 URL 放在生成的 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({
        // tell Webpack it should consider inlining
        type: 'asset',
        //maxSize: 4 * 1024, // 4 kb - the default is 8kb
    })

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

这利用了 Webpack Asset Modules。您可以在那里阅读更多关于此内容和配置的信息。

本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可获得许可。

版本