在前端开发中，优化网站速度是非常重要的。一个网站的速度往往会对用户体验产生很大的影响，并且对搜索引擎排名也有不可忽视的影响。而 CSS 中的 base64 函数就是可以帮助我们在一定程度上优化网站速度的一个工具。
什么是 base64 函数
base64 是一种编码方式，可以将任何二进制数据转化为可打印字符。在前端开发中，我们可以使用 base64 将图片、字体等资源转化为 data URI，从而避免了多次请求同一资源的问题。
而在 LESS 中，我们可以使用 base64 函数，将图片等资源直接嵌入到 CSS 中，从而减少了文件的请求次数，优化了页面加载速度。
如何使用 base64 函数
在 LESS 中，使用 base64 函数首先需要确保已经安装了 less-plugin-inline-urls 插件。安装命令如下：
npm install less-plugin-inline-urls
安装完成后，在 LESS 文件中引入插件：
@plugin "inline-urls";
接着就可以使用 base64 函数了，函数的用法与其他函数一样。以将图片转化为 data URI 为例：
.bg {
background-image: url("bg.png");
background-image: inline-image("bg.png");
}上面的代码中，我们定义了一个 .bg 类，给它设置了一个背景图片。在正常情况下，浏览器会对 url("bg.png") 这个 URL 发起一次请求获取图片，然后再将图片展示在页面中。
而使用 inline-image 函数后，我们可以直接将图片转化为 data URI，让浏览器直接使用这个 data URI，避免了多次请求同一资源的问题。
使用 base64 函数的优势
使用 base64 函数有以下优势：
减少 HTTP 请求
一般情况下，一个页面中会引用很多资源文件，如图片、字体、CSS 文件等。如果使用常规方式，每个资源文件都会发起一个 HTTP 请求，增加了页面加载时间。而使用 base64 函数，将资源文件转换为 data URI 后，可以减少 HTTP 请求次数，从而优化了页面加载速度。
对小图标等资源的优化效果更明显
对于一些体积很小的资源文件，如小图标、小字体等，使用 base64 函数的优化效果更为明显。因为这些资源文件体积小，使用常规方式无法明显减少 HTTP 请求次数，而使用 base64 函数后，可以将这些资源文件直接嵌入到 CSS 文件中，从而起到优化效果。
避免图片跨域问题
使用 base64 函数可以避免图片跨域问题。由于某些资源文件（如图片）可能存在跨域问题，如果使用常规方式获取这些资源文件，可能会出现跨域问题，无法正常显示。而使用 base64 函数，资源文件会被转化为 data URI，不存在跨域问题，从而避免了这个问题。
注意事项
使用 base64 函数时需要注意以下几点：
文件大小限制
由于将资源文件转化为 data URI 会增加文件大小，因此使用 base64 函数时需要注意文件大小限制。一般情况下，建议将体积较小的资源文件使用 base64 函数，而对于体积较大的资源文件，则建议使用常规方式获取。
文件缓存
使用 base64 函数后，资源文件被直接嵌入到 CSS 文件中，因此在更新资源文件时，需要重新生成 CSS 文件。这也就意味着，客户端需要重新下载整个 CSS 文件，而不能像常规方式一样只下载被更新的资源文件。
总结
使用 LESS 中的 base64 函数可以帮助我们优化网站速度，减少 HTTP 请求，从而提升页面加载速度，改善用户体验。在应用时需要注意一些细节和限制，但是正确使用可以带来良好的效果和优势，值得我们在实际开发中尝试和实践。
示例代码
-- -------------------- ---- ------- ------- -------------- --- - ----------------- -------------- ----------------- ----------------------- - ----- - ----------------- ---------------- ----------------- ------------------------- - ---------- - ------------ --------- ---- ------------------ ---- ------------------------ ------------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5b2f9f6b2d6eab3125598