00:02
下面呢,我们来处理图片资源,过去呢,如果你学过派四,你可能会知道处理图片资源呢,我们是通过fair加ul做处理的。Follow呢,就是将文件资源原封波动的输出去,当然在过程中它会编译成浏览这个派能识别的资源。而ul呢,就是在fire的基础上呢,多了一个将小于某个大小的图片呢,会转换成贝四格式,对图片资源做了些优化。OK,那么当然你不知道也没关系,因为现在WIFI5呢,已经把这两个功model的功能内置到pad里面了。我们只要激活这个功能,就可以去处理图片资源。OK,下面呢,大家就来到我的文档啊,去按照配置的方式去做。这里呢,有一个高亮的形式代表呢,就是我们修改的配置就在这里。我们只要设置type set,它就相当于使用了UR漏洞,能够帮我们图片进行处理。好,那知道这个之后呢,我们接下来啊,先把图片资源先整进来,然后呢,我们先打包一下,看看到底怎么回事,对吧,一起来看啊。
01:08
啊,我已经提前准备好了三个图片啊,对应的是咱们三个老师啊,对吧,咱们三个硅谷的老师。OK啊,我们一般喜欢用老师作为素材啊,我把图片呢,弄到咱们的这个代码中来。就这个一面。好了,已经弄起来了,这里面呢,就有三张图片,我尽可能的挑的是后缀名不同的图片,当然大家也可以一样的,也没关系啊,那么这三张图片呢,我在样式中分别引进来。所以我要修改一些样式。Background image。咱们的images下面的第一张图片,OK,然后呢,Background size,咱们写的cover,写的一个覆盖的形式。好,然后呢,我把这个样式复制一份啊,在less里面写一下吧。
02:01
好,这里呢,就改成。二那个偏距OK,再复制一份来到三。改成三那个GIF。OK,它这个格式化没有格式化,所以我们手动删一下。好了,那么三张图片都引进来了,此时如果你直接去打包,因为我还没做配置啊。所以此时呢,呃,我们直接打包的话呢,会发现它已经打包好了,因为这个功能呢,它已经内置到了我们的这个。就是咱们的这个外pad里面了,所以你直接打包呢,会发现诶这三个资源都处理了。当它是原封不动的输出的三个资源。对吧,原分不能输出好,但是呢,我们希望啊对图片做一些优化。我们一起来看。我们希望对图片做一些优化。我们来看一下这个图片啊,图片呢,有一张图片是KB,有两张图片呢是比较大的,有100多KB。
03:06
OK,那么小于5KB的图片呢?我们希望它转化成被64格式的。A,四格的图片有什么优势呢?简单理解就是它会把图片的转换成一个字符串。比方说我这里有个插件啊,我们可以演示一下。嗯,来设置在这里呢,我们安装一下这个图片转贝14的这个插件,好啊,安装好了之后,我们来去用一下。我们可以选择一张图片,比如说选择我们看看选择你吧。好了,那么这是张图片转换成BASE64呢,就是会变成一个这样的标一个字符串。这个字符串呢,只要放到图片的这个SC那里,那么浏览器自然会识别成一张相应的图片。所以优势是什么呢?优势呢,它这个字符串就不需要额外发请求了,所以图片转变44呢,优势就是提啊,它的请求数量会更少。
04:07
可以减少请求数量,减少图片的请求数量。对吧,服务器压力就会小一点,那么缺点就是转换成这种BASE64,也就是data UR u的形式的话呢,它体积会比原来变得更大。原来呢是将近5KB,现在已经变成6KB了,大的大概1KB多。对吧,到了1KB多将近2KB了。所以这就是他的一个问题,而且是比方说将来如果你是100KB的话,我们看啊,它会变的更大。你看变成200多KB大了,这将近60多KB,所以这图片体积越大,它体积会变得更大。但是图片体积小,它只增加1KB左右,那就还好,所以我们一般呢,我们想综合一下,一般来讲是针对于小图片,我们会转成杯64,那么这样呢,它的体积会更小,然后呢,即使图片体积变得大一点,也就大于KB左右,那无所谓。
05:02
但是对于大图的话呢,我们是不能转为44的,因为会把体积变得非常大,这样呢会导致整个页面的加载速度变得慢,所以这样就得不偿失了。所以大图的话呢,我们希望还是原封不动的请求。对吧,那这该怎么办呢?我们来看啊,那么这时候就可以在文档直接点这搜索,我们直接搜这个set这相关的这些内容。胶布一扎了其中,下面这里就有啊。下面这里呢,介绍了我们这个set呢,其实有很多种形式,其中我们这个S呢,它可以转换成贝64啊,转换成贝六四呢,就是把它变成data塔uri的形式啊,和一个默认的单独文件之间选择。我们往下走,这里我们就不一看了啊。它下面呢,会有这种配置方式。再往下走。
06:00
这里其实就是你要看什么呢?诶来到这啊,这个配置就是我们想要的,我们把整个对象复制过来配置一下。它现在的默认配置呢,不能够激活这个转杯44的方式,所以我们希望它激活,那么我们就要进行以上这样配置。来,首先test这里呢,我们要处理的是图片。对吧,那么这个正则呢,来看怎么写啊。我们可能是PG图片或者是JPG,也可能jpeg,所以一呢打个问号,可以有也可以没有,然后呢,还有JF对吧,还有YP,还有什么SVG啊,将来什么图片都可以。那么type它才可以处理。Pass呢,这里面就是我们小于多小的图片要做处理啊,一般来讲是10KB左右。那么这个意思就是小于10KB。
07:00
会转。那么优点我们前面也说了。减少请求数量。缺点的体积会变得大一点点。当因为小图它大也就大一点KB,这就无所谓了。所以我们会对图片资源呢,做一个小小的优化啊,那么一般就是这样处理的好,此时呢,我们再次打包。OK,打包成功,再次打包之后呢,呃,注意看啊,它这里现在看起来还有三张图片啊,这是因为我们打包的时候呢,它不会删除之前的资源。所以我们要看到效果的话呢,需要把这个diss木器删掉,再重新打包一次。
08:01
诶,这时候你会发现打包出来只有两张图片呢,因为有一张那个JPG的图片呢,它小它是5KB,小于这个10KB,所以它转换成BASE64了。这个贝斯六四的图片呢,我们通过这个页面打开去查看,就能看到效果了。三张图片对吧,其中有一张它是百64行驶,这是第一张。它转换成base形式。第二。这些都是要额外发请求的。通过请求得到这个图片,还有最后一张都是额外发请求得到图片的。好,所以以上呢,就是处理图片,最后总结一下啊。除了图片呢?我们并不需要下载额外的load,其实甚至它本身ipad就能处理。本身外派就能处理,我们什么都不需要配置。那么我们我们要做什么呢?我们要做个小小的优化。因为我们希望小于某个大小图片呢,它不要去额外发请求了,直接直接渲染就好了,所以我们可以转换成被44形式,那么这时候我们就需要进行配置。
09:08
进行配置。Type就够了。好了,配置完之后呢,我们可以在打包的时候观察这个输入结果,就会发现输出的图片会少一张,但前提要记得啊,它不会删除之前的资源,所以你要把之前的这个东西给删掉,再重新打包才能看到效果。好了,那么以上呢,这里就是图片资源的处理了。
我来说两句