00:02
除了JS文件可以减少体积以外呢,我们对图片也可以做减少体积。而且往往都是项目中的图片体积都比较偏大,所以呃,请求速度呢就会比较慢,当我们对图片进行压缩的时候,就会达到图片体积显著的减小。这样的话呢,就可以让我们请求速度更快,加载速度更快了。大家这里需要注意的是啊,我们要处理的图片是本地加载引入的图片,如果图片是项目中的图片,是在线连接,那么就不需要用它了,因为只有本地静态图片才需要进行压缩,而在线连接我们没法去做。那么这里呢,需要用上一个插件啊,叫image minimize APP,专门用来压缩图片的插件。首先第一步我们要下载的时候呢,这两个都要下载。下载两个包同时压缩呢,分为无损压缩和有损压缩两个方式,所以你还要下载无损压缩的东西,或者是有损压缩东西,两个东西就行,那么它们的区别呢?我这里放了一个链接,大家可以看一下。
01:07
那么简单理解就是无损压缩呢,它没有损坏咱们的图片的一些内容,所以更好一点,质量更好,有损压缩呢,就会损坏一些,它能达到体积更小,但是。这个图片质量会受受影响。所以你不想图片质量受影响的话呢,我们就用无损压缩,所以接下来我们要下载一些包。那么这里包比较多啊,而且他还要去第三部下载一些东西,所以。我们这个下载速度或许会比较慢一点,我们要耐心等待一下。OK,第一部分把我下载好了,我们再下载无损压缩。诶,这里我没有复制好。OK,手动复制一下。那么这里在下载这些依赖包的时候呢,它下载针对JF下压缩的,JPG压缩的,对吧,PNG等等这些SVG等等其压缩的包,它分别进行了下载他们的一些插件。
02:01
而且这里需要注意的就是。下载的过程中呢,我之前也尝试过啊,下载的时候有时候它下不下来。或者下载速度比较慢。这个时候如果你有翻墙工具的话,开启它可能会更好一点,其次的话呢,就是下不下来,那你就等一等他,如果下载失败的话呢,你再重新下一遍就好了。所以这里需要耐心等待一下,就是这个下载呢,可能要多尝试几次,那么可能某一次就成功了。如果你每一次都成功不了的话呢,大家可以到时候在评论区留言对吧,我们后面呢,可以想办法再给大家一些答案。现在呢,我们就稍等等他下载。好吧,让它慢慢下,我们先接下来进行配置,配置的话呢,我们要引入这个插件。来我们是以无损压缩为例子的啊,我们引入这个插件。然后往下走,下面呢,我们进行插件的配置,这个配置比较长,所以我们来复制粘贴,不需要去去去管它,我们直接复制粘贴就好了。
03:11
来压缩图片,好整体呢就是去设置这个压缩图片的一些配置,那么我们最终就会达到效果。而且这个配置呢,我们可以放到这个minima这里面收缩啊,因为所有压缩呢,我们都可以放一起。好,这里面呢,他就做了一些GF啊,JPG啊等这些配置。OK,那么这个配置呢,大家只要复制就好了,这里的最大难点就是包下不下来。对吧,我们重新来一遍啊,CTRLC终止啊,这个下载我们再下一遍。好了,现在呢,他就已经下载好了。下载完成之后呢,我们可以去用P必去打包一下看效果,那么打包的时候呢,应该。
04:06
汇报一个错误。稍等一下,打包速度有些慢,因为他调用这些程序去做,诶他就说包错了,他说模块构建失败,图片这个处理失败啊,处理失败呢,就是我们这个插件啊执行失败了,因为他要使用这个库的一个这个程序去对我们图片JPG图片进行压缩,但时这个程序没有找到,所以它处理不掉。这个里的原因还是因为他这个程序呢,没有下载下来啊,所以出现的问题我们可以去not models下面找一下这个程序啊。稍等。好了,到这里我们来看一下,就在这里,这下面呢会有一个Windows Windows下面呢,没有安装好这个程序,所以导致失败。
05:01
那么没关系啊,我们这里呢,已经提前给大家准备好了,这两个程序呢,已经下载好的方式,下载链接呢,在这个下面文档的下面呢,给出来了,我们是去官网下载的。好,那么下载好了之后呢,我们要做的就是把我们的把这个下载好的程序移到这个Windows下面,注意不要移错位置了,是Windows下面。不是因为这个提示报错的时候,它也提示了,是它会去Windows来我们放大一点啊。他会去Windows下面找出程序,所以目录是这个。OK,那么如果还报另外一个错误的话呢,我们还需要加啊,当然另外一个呢,它有时候会自动会下的下来啊,所以我们可能不需要处理了。还有一个可能报错的是这个包,它Windows下面看看有没有这个程序A钮,所以我们不需要下了。他如果没有的话,我们还需要在那里下放上去。OK,只要把程序弄进去了,我们再打包就可以了。
06:02
好,打包之前呢,我们先对比一下这个图片体积啊,因为我们要压缩嘛,那要对比一下前面我们打包失败了,所以图片呢,还没进行压缩,未压缩之前呢,大小是195和129。好,我们再打包看一下压缩之后的情况。之前的是195和129,那么现在我们再看。打包成功了,那么因为文件内容发生变化,所以这个哈希值它也变了。再你看看一下,你看它就变成88和188KB了,那么它就普遍的这个体积变得更小了。好了,那么这个就是这一块啊,压缩体积还是比较明显的,所以如果你本地有很多图片的话,建议你使用这个插件对咱们图片进行压缩,那么这一块使用的时候特别要注意的就是我们需要安装包比较多,所以大家一定要看到教程去把这些包给安装一下。
07:08
那么第一种包式也要下载无损压缩,有损压缩选择一种就好了,那么我们是以无损压缩为例进行的配置,如果是有损压缩配置会有些不太一样,这时候你要去看这个叉G的观望。好,那么配置完之后呢,你会发现下载的时候有时候会出现一些程序下不下来,对吧?那么我们提前给大家准备好了这些下载好的这个程序包,那么大家只要把它放到指定的目录,那么最终才能生效。所以整个压缩图片呢,配置起来会稍微麻烦啊,所以大家一定要细心耐心的去做,那么最终就可以完成它了。OK,以上呢,这个就是我们压缩图片了。
我来说两句