用Webpack URL Loader在CSS中内联文件
编辑本页警告:您正在浏览的文档欧宝体育电话欧宝娱乐app下载地址Symfony 4.0,现已不再维护。
读本页的更新版本用于Sy欧宝娱乐app下载地址mfony 6.2(当前稳定版本)。
用Webpack URL Loader在CSS中内联文件
一个简单的技术来提高web应用程序的性能是减少HTTP请求的数量内联小文件作为base64编码的url在生成的CSS文件。
Webpack Encore通过Webpack's提供此功能URL加载程序插件,但默认是禁用的。首先,将URL加载器添加到项目中:
1
$Yarn add——dev url加载器
然后在您的webpack.config.js
:
1 2 3 4 5 6 7 8 9 10
/ / webpack.config.js/ /……再来一个/ /…….configureUrlLoader ({字体:{限制:4096},图片:{限制:4096}});
的限制
选项以字节为单位定义内联文件的最大大小。在前面的示例中,大小小于或等于4 KB的字体和图像文件将被内联,其余文件将照常处理。
控件支持的所有其他选项也可以使用URL加载程序.控件的对象中删除相应的键,即可为图像或字体禁用此加载器configureUrlLoader ()
方法:
1 2 3 4 5 6 7 8 9 10
/ / webpack.config.js/ /……再来一个/ /…….configureUrlLoader ({// 'fonts'没有定义,所以只有图像将被内联图片:{限制:4096}});
此工作,包括代码示例,是根据创作共用BY-SA 3.0许可证。