00:00
大家好,我是学习园地的特约讲师高若峰,那外派环境优化咱们说了分两种,一种呢是在开发中,也就开发的环境优化,一种呢是生产环境优化,那开发环境优化呢,咱们讲了热模块替换。这个热模块替换,那这节课呢,咱们来学习一下,呃,生产环境优化,当然开发环境的优化有好多需要处理啊,只不过那些你用到的时候现查就可以了,那咱们学这个外派的目的是以以后你去使用像vuee啊,React这样脚手架的时候呢,我们为那个的学习做准备啊,所以呢,嗯,有一些其他的环境的优化,当然了,你不优化一样,现在可以用ipad去工作啊。那你在以后工作中遇到什么样的问题,先用现场就可以了,不然的话加大咱们学习的一个时间。那生态环境优化,咱们这节课来学习一下。嗯。这是开发环境优化,呃,热模块的一个替换,那生产环境呢,我们来做一个什么样的优化呢?就是去除项目里边的死代码,什么叫项目里边的死代码呢?
01:02
嗯,这个呢,咱就没有必要区出来是TM的了,因为HTML代码如果你只要写就是在页面上生效的,对不对,那你不需要的你可以删掉,要么呢,你注释掉,注释掉的时候,我们打包的时候也会把注释掉的怎么的给我们去掉,对吧?所以HTML是不用我们在打包的时候去去除代码的,因为里面就没有代码,那我们要去除的呢,就是GS里边的代码和CSS代码,那还是我前面跟大家说过的,就比如说。嗯,有几种可能,一种可能呢,是你在用第三方包的时候。咱就比如说你用解宽RY,那有可能只用到解宽RY里边的解块里边,比如说有1000个方法,假设啊,那你只用到里边十个方法,那么需不需要把那1000个方法都打进,都打到包里边去呢?对吧?那再有比如CSS优化,那假如说我们在用boorp的时候,你看那有可能我们需boor,比如说是140KB。那我们只用到了boos SPA里边一些常用的,比如说山歌布局,比如说常用的那些类对吧,那些类库,那我们在用的时候对吧,那我们也需要把整个不存啊,全打到我们项目边去吗?全编译打包到我们项目里边去吗?也不需要,对不对,所以呢,我们得用CSS和JS,这是用第三方框架的时候,我们打包一部分到我们项目里边用到的东西,到我们项目里边不用到的。
02:17
那你想想,如果也打包到我们项目里边,那我们浏览器是不是也得把它下载过来,然后也得执行对吧,也得在里边都过一遍,然后一看没有用到对不对。那再有。我们在写项目的时候呢,好多新手习惯什么的,不是自己写,也不知道用第三方的库,看到别人这个特效啊,样式写的挺好,然后去右键插片源代码,然后把它里边整个一个CS文件全拿过来,对吧?但是您家CS文件,别人的CS文件是写整个页面的,而你只看好您页面里边一个小特效,那你就要用你整个CS文件,你想想。那我们浏览器的下载时候,是要把几万行的CS文件都下载过来,对不对,结果你只用了十行,那不浪费吗?对吧,加载也慢,运行也慢,所以呢,我们很有必要在我们打包的时候,把那些代码,也就是用不到的JS文件,用不到CS文件,把它等到不打到包里边去上线运行的时候,这些就不需要。
03:11
那我们先来看一下。外派五呢?当然不同版本不同的做法外,PAD5呢,它有一个叫素描的功能,当然这四里面就加上这功能啊,这五里边用起来更更好一些啊。这个为什么叫树摇呢?就是你比如说一棵树,那树呢,现在活的叶子是绿叶子,紫料叶子是黄叶子对不对,那要么有瓜什拉风对吧,那瓜尔拉风,比如说你手都的去除对不对,要么你晃动晃动树对吧,摇晃树把那些死叶子都晃荡掉,那都留绿绿叶,那就是我们。的,呃,想要的东西对不对。你看这是树爻去掉了实际上并没有使用的G代码来减少包的大小。这个,那前提条件是什么呢?必须使用的是ES6的模块化。那咱们现在使用的,因为呃,咱们讲ipad的时候呢,呃,有的同学没接触ES6,所以我说注意量我少使ES6的这样的一些功能。
04:04
尽量少使用对吧,所以呢,呃,使用的都是靠那JS去包含的那种的是没效果的,另外呢,必须得在生产环境编译成生产环境。它压缩了,然后把那些东西去掉了,这个过程中才有用。来我们做个实验。不用你建用户任何插件,外派本身就支持,比如说。我们打开我们的GS对吧,这里边儿。你去掉吧,啊复制一份。嗯,在正好考虑一下。你会在?CTRLCCTRL粘贴一下,改成一个下划线一给你留意一下啊,当然也不用有这个文件也很简单。把这个文件删掉,不然咱们别改错了。真的这个是咱们的入口文件对不对,那比如说我在这里边来做一个文件,我用一两个文件就给大家演示一下这个过程,你看一下就行,那我先用common JS让他看到它无效的效果啊,先看一下。我们这里边,呃,找到做一个JS文件,我们做一个,比如说包含优酷common.js。
05:05
这里边呃,随便做两个方法,比如说Y里边有个X有个Y。然后呢?呃,返回。呃,X加Y。然后我再做一个to,两个XY。做一个方法,然后呢,Return返回X乘以Y。这样的代码,然后呢,我得把它暴露出去,对不对,我们用键S的方法啊,弄得点ex这个。等于我们把这两个我们都暴露出去,Y。和to这样,这也是这也是ES6的用法啊嗯。把对象简写了对不对,这样的一个方法结构一下,然后我们在这里边。包含一块。包含因为都暴露啊,你要不暴露的话,假如说我不暴露,这么写你看。这么写啊,在这里边我们直接开包含,那相当于呃,没有什么,不是说没有效果,就跟我们两个文件合在一起写没什么区别,而我们用暴露的方式,什么暴露的话,我这个模块才用到那边暴露的东西是这个意思,你比如说包含当前模块下how加S对不对,那一样,这里边跟包含一样,我调用YXY对吧,然后调用to,我你看我调用一个。
06:20
两种都写下。外派。然后直接用这个编一下。嗯,烟瘾。编译编译这你看没家庭模式默认是什么?默认就生产模式,我用这个编译,所以说得用嗯NPM得在生产环境下,对不在B。来我们打开这个,看这个慢点GS。现咱们想这个是按当然你上线就让这格上,我们为了看清楚。Ctrl alt加L啊,你看在这里边。你看我们如果这么用的话,里边没包含,那你这里面只有用到了Y对不对,这里边只用到了Y对吧。
07:04
看到了吗?只用到老板,没有其他的没有什么量的写没有用的土,对不对,他这样给我们包含打包的,看这里边内容也挺多,编译的,他投资信息什么的这些东都进来了,使用这种呃comment的这种呃包含页面的这种方式。你看现在我再暴露一下这块对吧,暴露暴露的时候呢,那我在这块,呃,在使用的时候呢,我把它结构一下。直接生成两个变量的函数,就给我们一个处理啊,Y two。啊。你假如说我这里边儿这么用,直接换。指定没用的to对不对,然后没用的to方法。用了一下。好,那我们再看一下这个。CTRL加L。你看这里边万和two这种暴露的方法都给我们加进来了,对不对,是comment下基本上没有去掉我们想要的东西,那我们说了两个条件,那我们刚才编译的时候用到了什么这种,呃,生产环境这是没问题的,但是呢,我们得没用,用的不是ES6的模块,因为现在都是用E的开发嘛,这ES6模块才有效果,那我们不动暴露,我分别单独的用E6的方式,暴露方法ex暴露这个方法ex。
08:17
暴露这个方法,然后我们在这个方法里边,我们不用去报完了,我们按port引入,引入什么呢?One。和to这两个方法,然后from。这里边儿是。用的一路,然后我一样调用这个Y,这个我们编译一下,你看如果是一六方法,我们还是用同样的方法去编译啊。同样方法编译,那我们再看这部件。这个不对,这个他应该别一把把删掉啊。然后。进行一下。你看它使用的模式,生产模式对不对,然后我们生成的目录这个买过来。
09:04
那怎么把HTM文件都拿下来,找一些入口文件,把这些而TML的东西我们也去掉,那这个入口文件加了HTML的也做口文件混存在一起啊,所以内容看起来比较多。来。所以我们看一下,你看就很少就使用SY对不对,所以呢,用ES6模块编译的时候,他其他的只要是你用到的东西,他给你拿过来,用不到的东西根本没拿过来,我这里就用SY对吧,然后也没打印,结果他觉得那些都用不到,所以全给我们去掉了,变得很简单了,对不对。那比如说我在这里边,呃,打印一下点rog。答一下,然后我们再编一下。你看他就把他用的东西提出来对吧,函数的结构他都没给我们提出来对吧。你这个来你看啊,我们。CTRL加L。你要打印在这块调用这个对吧,这是函数的结构,是不是我们引入了。
10:05
这个两个对不对,但是我们只用了一个,所以呢,在这里边。编译的时候就只把这一个给我们提出来了。对吧,两个相加的函数就给提回来了,其他没给我们提出来。这就是呃,这种树摇的一个好处。所以呢,用ES6就可以解决这样的一个问题,2000条件本身外派就是支持的,对吧,外派自带数摇的功能,可以去掉这个代码,所以呢,我们。所有模块包含使用ES6对吧,然后只要开启生产环境就可以。那去除CSS的,我们再来看这个代码,这个CSS有的时候我们用到的代码,这个代码有点太好听,对不对,就是用不到的CS样式呢,特别的多,对吧,你比如说我们现在。呃,写一个例子,现在写例子。在。这个里边啊,天猫里边,我们这里边啊,跟这没关系,我们在。
11:00
找样式文件,记住我们原来写过这个样式文件,你看啊。这里边儿有box对不对,那我这里边儿还有什么,还有。这些东西都有对不对,那我们这块。复制一个。你看我让这俩属性是一样的。再复制一个三。这个属性颜色是一样的,里边什么都没改,样式是一模一样的,它还可以把一样的跟我们合到一起,你看啊,这是这个功能。那现在如果我不用什么都不用的话。我没有用插件去解决,因为这样得用插件啊,没有去解决的情况下,我们直接现在编译,当然了,我得在入口里边引入。引入这个用什么引入就行了,就是说嗯,I'm post from引入呃。这个style。啊,这。比如这个。这也用,这个不用ES6正好也可以啊,这个无所谓了,你看啊。每块。
12:00
包涵。点斜杠。当前这个你看我们现在编一下。印一下。好运,成功诶。没出现单独的一个。要什么键呢,我们是不是。在这里边儿,我没把它插入的,是桶里边的。画师。用这个是单独的一个文件呢,我们再看一下单独文件生成CSS。为什么没出来?你看慢点,CSS跑哪去了?这里边引入了删掉重来。我们编一下。NPM6。因为他得在呃,打包之前,他把这个给我们生成,你都已经打完包了,来去除,那就不好去除了,在打包之前他去除在这呢,对吧,刚才那肯定是有缓存,那我们看一下慢点CSS。
13:06
这里边我们还是用什么CTRL加L来看一下,你看这里边它现在没有用那个功能的话,它会把相同的跟我们合到一起,这是它本身自带的一些功能,没有用插件了,但是你看其他的这些我们没引用的对吧,它都给我们包含进来了。那现在我想做的什么呢?在这里边我只要一个我引用的,其他的不要比如说。Div井号。我就下载这一个,就要这一个,其他的不要对吧,你看现在他不是现在的他是把所有的。都给我们加进来了,对不对,唯一给我们做的是把这几个一样的,它跟我们合到一起去了,对不对,那我们想把这些都去掉对不对,只留一个怎么办呢?那我们使用的有好几种插件啊,有一个叫PI fy p ss的插件,嗯,但是那个呢,在咱们这个版本也不太好用,现在呢,都使用这个,这插件非常简单好用。就是外派使用这个插件去除无用的CSS,那我们把这个插件。
14:07
我们装一下。N PM install。粘过来粘贴,然后。大地。这个插件啊。然后我们看一下装一下这个插件,它需要干嘛呢?插件的引用,那我们直接在插件的模块里面,我们直接加上这个就行了。也就是,但这个一定得在分已经写在分离单独的这个文件吗?写在它后边就行。啊,这个,但是这里边儿呢,现在他需要什么。需要这个重新,因为我说了在什么打包之前需要把没用的csi去掉,所以呢,他就得使用这个global,相当于异步加载一下,把指定的文件夹,那这指定文件夹怎么指定的呢?所有目录及子目录下的这些东西都取出来。在这个之前,先在读取到这个文件的时候,对不对,去掉对吧,比如说读取通过HTM文件里边,看到哪里边有用到这些样式的,对吧,然后再读取CSS,找到这个用到的留下。
15:09
你想象我们的原理,如果这个程序这个插件开发,你会怎么弄,对吧?是不是先得找到HTM文件,RTM文件,看RTM文件里边用到哪些样式了,然后呢,得到CS文件里,把这些样式取出来留下。然后咱们再打包对不对,是这样的一个过程,所以他得找这些文件,那找这些文件呢,先去找,在没打包之前先去找同这插件,那我们就得使用lo这个,那既然使用这个,这个是node的。加入note的一个模块,那我们需要先怎么了?把这个。包含进来,因为现在咱们装的环境就是基于node装的,对不对,所以呢,我们需要把这个。弄过来对不对,然后呢,我们想组合,因为这是固定代码对不对,我们想合这样的一个代码,需要用到什么,需要用到pass下边s pass怎么来的,还记得咱前边用过什么。用过一个路径,你看啊,在这里边也是note里边专门有一个什么pass的一个模块,从这里边有杠杠电压能把我们路径取出来,所以呢,我们就可以组合一下。
16:09
通过。啊。组合一下,那这个方法是哪来呢?这个方法就是pass路径里边了,所以呢,我们把这块加上一个pass,这样的话,我们就既取出来这个方法对吧,又取出来pass这个,呃对象。又怕这个。不用对象,直接这个对象里边的方法,Goin联合的一个方法,那我们就把同样都是pass里边的这个,所以呢,也有这杠加当前目录,就把当前目录和src结合,所以这两个方法的作用是几乎是一样的,对吧,这样用哪个其实都行组合,然后形成一个src这样的一个pass,所以pass对象那就是src,那src代表的就是什么?就是当前目录下结合src下边。这样的一个链接路径,对吧,然后我们看到这个了,那你就知道。
17:01
知道什么呢?知道我们这里边log卜相当于这个异步去找什么呢?你看当前部下,但是正好也连接SR写了,无所谓了啊,然后下边的子层,就是下边所有层次的这样的目录和文件都拿过来录目录对不对,不要带目录的时间对不对,都拿过来是这样的一个语句,然后我们使用这个插件,那我们就必须得怎么办呢?必须插件刚才我们已经下载了,那我们需要插件必须得引入咱们才能使用,所以呢,我们再引入一下这个插件。太长了。好,那这样的话,就通过这个插件读取RT文件,看里边用到了什么样式,然后再找到CS文件,把里边的样式提出来,提出来之后,然后呢,打包提取成单独的文件,那我们加上这个之后,我们现在再来运行一下。你看这个念。再来一个。好,我们再来看一下CS文件,稍稍等一下,他有可能这题慢一些。
18:02
然后我们ctrl out加L看一下,你看就只有一个什么boss了,其他的全是代码,是不是全部明掉了,我们样原来里边是不都代码,那如果我在这里边咱用到一个,比如说。BO2。或者这里边儿还有什么。嗯。你卖之一对吧,那我这里边可以加上。呃,IM。用到了这两个当然类啊或者什么的都可以啊,他会自己根据那个关联关系,把用到的留下,没用到的直接给我们去掉。然后我们看一下这个件,稍稍等一下。不然的话,它点开之后有可能是原来缓存的那CTRL加L。呃,用到了这个还有公共部分的一脉之一,你看把用到的给我们留下了,没用到的没留下。所以呢,你想想咱们在优化的时候,生产环境优化是不是这个优化。
19:06
这种去除项目里边死代码是不是非常有必要优化呢?你想想你从别人那块搬过来的。咱们就偷过来搬过来的,你前面代码你都可以看得到的吗?搬过来的有2万行的CSS,你就用到了里边的几个小地特效,用到了十行20行的一个样式,对吧,那现在其他的你不用手工钱,你也不知道去掉哪个对不对,那我们在打包的时候,他就能给我们去掉,这就是这个好处。很有必要的功能。当然了,优化除了这几部分,那还有其他的很多优化的,呃,为给大家说了,当然了,你在呃,咱们在后边的课程里边,如果需要用到什么样的优化,那么咱们再讲加什么样的优化。好吧,好,谢谢大家,这节课我们就讲到这里。
我来说两句