内联CSS文件与Webpack URL加载程序

一个简单的技术来提高web应用程序的性能是减少HTTP请求的数量内联小文件的base64编码的url生成的CSS文件。

通过Webpack Webpack安可提供此功能URL加载程序插件,但默认情况下禁用。首先,将URL加载程序添加到您的项目:

1

美元纱添加url-loader - dev

然后在你启用它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 ({/ /“字体”没有定义,所以只有将内联图像图片:{限制:4096年}});