00:00
啊,来看一下,这里面我们要去说最后一个优化,叫打包文件的分析优化,什么一个概念呢。啊,我跟大家演示一下啊,演示一下。其实view的脚手架,它提供了一个可视化的一个打包工具啊的一个包,你看这外派这个办的就是个包嘛。这个就是分析器的意思,配置都写好了。啊,我们怎么用上呢。大家看到按照这个要求做啊,你们按照要求做,我们做一下你就懂,这个也没什么难度。来看看npm run build run是真正只是去打包去的。后面加一个杠杠,Report。啊,刚刚report以后呢,啊,他就会去打包,并且生成一个页面啊,我这里面有个截图。
01:00
啊,我这里有一个截图啊,这个截图呢,就是刚才啊等一下啊,他没有他正在打包,他把打包文件啊,会进行一个分析,把那个分析的结果以页面的形式,图形化页面的形式展现给你看。也就说老师我看东西有用吗?有用你就能发现,你就能去看,诶哪些占用的比较大对吧?诶那个大的能不能做优化了对吧,能不能不用,能不能用小的来替换它对不对等等之类的,我们来看一下啊,这个挺有意思的。大家看着,而且他还能放大缩小这个,这个东西做的挺牛逼的。下面大家看呢,一共就能看到这个是那个第三方的包,我们说window是所有第三方包打的,这个包里面包含这个moment Mo JS view是吧,这个什么。
02:03
这是什么?是不能看见你说谁占用的比较大,所以和这个站的最大就整个一片。能到不这个占用的是比较大,你看它多大,就525KB,它没压缩之前,它说的是压缩最小,最小的压缩是64.88。从这个里面整个能看得出来整个压缩的情况,也就说最终大家看一下啊,我们这个压缩完是248能看到吧,而在这个window里面,这个他一个人就占的挺大的,其实其实我就用了一个格式化的功能,搞得就占的这么大,你想想看。能懂我意思不啊,就是这个,我在想我要就自己写,要不要搞一个小一点的库是吧。
03:00
就是我发现了这个问题,我我我开始没想这个还这么大一个东西是吧。对,包括我的Mo,不过MOS没关系,最后都会干掉的。因为我们现在是自己摸数据嘛,但真正做的时候是不需要他的呀。这个能不能弄啊,这个东西挺强大的,他可以他可以,譬如说想仔细的看,想进去看怎么办。点进去对吧,那你有人说老师点进去了,我想回去怎么办呢?它其实是点进去是放大了缩,那咋缩小呢?嗯,就滚了滚的就按照康键滚的,嗯,OK可以啊对吧,你滚了滚也可以滚的啊,这个东西挺好用的。大家进了公司,一上去就把公司的那个项目给这么看一看。啊,说不定找出一点问题来,对吧,好,那我就下面我就以它为例来说一下啊,我们这个想换一个。
04:01
嗯,来说一下,这个地方呢,有另外一个库叫date杠,FNS也是做类似事情的。我们搜索一下看看啊,大家看到这里面不有一个FM轻量级的加script日期库,对吧?啊,就是这个东西。啊,下面呢,会有一些说明,我就不再一个一个的去看了。那我们就直接用上,那首先第一步还是干嘛。是不是下载。对吧,那我就下载去呗,N PM in,斯诺杠杠C接着了date-f Fi Fn代表的是函数,它说的是。呃,就是一些格式化的函数给你啊,你想用哪个函数,你就引入那个函数的相关代码就可以,别的不需要的就不需要引入啊,等会你要看到它的优势啊。
05:04
好,下载下来,我们来看一下那个语法。大家看到我啊,这个包里面有一个专门的函数的一个模块,叫什么format,我就引入这个format it。能不能听懂我意思,大家记住啊,上面还有一种写法这么写,我发现这么写有问题,这么写他其实把整个包都打进来了,这个当前这个包比他要小不少。当前这个对F比它小不少,也就说你上面的用法能优化一点,就能小一些,但是还不够,还不够,你最好是这么去。你说我不要这个吧。能不能不要它了,那这个也不用了,是不是。那下面怎么用呢?我就直接把这个结果捞出来,就是它有一个函数,就是有一个函数叫什么form。
06:03
你就把这个去掉。Form就是两个参数,一个就是Y率,一个就是form域。看着了。No,不懂。好,我就做了这样一个编码的改造。下面啊,关键时刻到了啊,我要去干嘛去了。是不是重新的打包生成一个,那个就生生生成一个展示的一个界面,对吧,生成一个展示的界面,就导出一个展示的界面,我们最后来看一下,看看这个效果啊。这这个啊,姓刘的等会比对一下,其实都不用比对,主要是他这个占的越大,占的空间越大,这个这个设计非常好。能懂吧。你们如果谁。大,它占的整个整个空间比例就更大一些,一眼就能看出来,水比较大,水比较小。
07:07
打包了,需要点时间啊,快了。而且大的呢,在靠窗,它是从大到小这样排过来的。你要看某的那个日期库去哪了。你都看不见对不对,那肯定有,肯定是有啊,只是说他比较他现在特别小了,在哪呢?哎呀,我的天呐,这里。贼小能懂我意思吧,你看刚才他没压缩之前是多大来着?525对不对,你看我这个没压缩之前多大。从500多变成十多。
08:05
其实这个效果就特别,也就说我想了很多代码吧。就这一下,你这一周不用干活了。因为你已已经把你的你们公司那那个整个包都减少了很多了啊,就已压缩的最终压缩了,你看我这个压缩以后才2.2.84吧。你看他的这个压缩以后。是不是64,说白了我给他减少了60KB 60KB得写多少代码你知道吗?啊,你要自己写代码,写60KB的代码,那你那写至少写一个月。你就想嘛,都是文字文本性的东西,你要你要写写你可代码得写多少。能懂我说意思不啊,其实这个效果就是非常明显的。啊,这个看起来还是挺酷的,就是就这功能还是比较不错啊。
09:00
哎,这样就能够去知道我们当前整个项目里面哪些占用的比较大啊,我们去做一些可不看可不可以做一些优化处理啊等等之类的,嗯,行,那整个我们就讲完了。
我来说两句