最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】url-loader中的DataUrl的含义

Webpack crifan 2647浏览 0评论

折腾:

【基本解决】Webpack中url-loader和file-loader区别以及到底用哪个

期间,需要去搞清楚

url-loader中的DataUrl指的是啥。

what is DataUrl

RFC 2397 – The “data” URL scheme

Data URLs – HTTP | MDN

html – What are “data-url” and “data-key” attributes of <a> tag? – Stack Overflow

javascript – What is the size limit of a Base64 DataURL image? – Stack Overflow

data:urls – what are they and how to use them / Stoyan’s phpied.com

Data URI scheme – Wikipedia

【总结】

(0)定义

DataUrl=Data URL=地址前缀为data:的URL

允许内容创建者嵌入小的文件到文档中。

(1)语法

是:

data:[<mediatype>][;base64],<data>

mediatype:比如’image/jpeg’,默认为:text/plain;charset=US-ASCII

比如:

data:,Hello%2C%20World!

Simple text/plain datadata:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3Dbase64-encoded version of the abovedata:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EAn HTML document with <h1>Hello, World!</h1>data:text/html,<script>alert(‘hi’);</script>

An HTML document that executes a JavaScript alert. Note that the closing script tag is required.
background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC”);

(2)工具

对于把数据编码为base64的话,有很多工具,比如:

Linux类系统中:

uuencode -m input_file_name remotename

输出:

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

js中的话,可以使用API:

Base64 encoding and decoding – Web APIs | MDN

php中的base64编码:

$ php -r “echo base64_encode(file_get_contents(‘check.png’));”

(3)限制

而对于DataUrl的最大值的限制,不同浏览器也不太一样:

IE7:不支持DataUrl

Opera 11:65K

Explorer 8:仅限制图像和css等文件的大小

IE8:32KB

IE9:文件最大限制为4GB

(4)作用

DataUrl的其中一个作用是:

通过把本来应该用http链接的方式去加载网络上的图片的方式,变成本地直接加载dataUrl了,从而使得:

减少了Http的请求次数,提高网页加载速度和性能

(5)用法和场景

典型的使用场景是:

对于一个很小的图片,才把图片的数据转换为base64,写成DataUrl的方式

比如某个很小的红色对勾的图片:

一般的写法是:

<img src=”http://phpied.com/images/check.png” />

写成DataUrl的方式就是:

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” />

正因此,对于Webpack中url-loader中,才往往会加上limit的参数,比如:

{test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192’} // inline base64 URLs for <=8k images, direct URL

转载请注明:在路上 » 【已解决】url-loader中的DataUrl的含义

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.176 seconds, using 22.08MB memory