00:00
大家好,我是学习园地的特约讲师高若峰,上节课呢,咱们介绍了开发服务器的配置,也就是DSO的配置,那学了前边的所有的课程呢,其实呢,你已经可以用wepad去做,嗯,开发工具去开发你的项目了。那我们接下来要学什么呢?虽然我们可以开发了,但是呢,我们有的时候呢,也要去做一些优化的设置。优化什么呢?优化我们分两方面来优化,一部分呢是优化我们的开化环境,一部分是优化我们的生产环境,其实这里面生产环境是我们最需要优化的,比如说。我们把代码上线运行,那代码如果优化好的话,它的性能会提高,用户访问速度会很快,体验会很好,所以这是我们最需要去做的,对吧?其实咱们前面的一些默认配置呢,已经帮我们做了很好的一些优化,比如说压缩的功能,对吧?这些功能都是在代码环境里边帮我们做的一些优化,那开发环境我们还需要做哪些优化呢?也有很多,就比如说。
01:01
虽然我们的div server就是我们的开发服务器,已经能够帮我们自动编译打包,构建我们的代码环境,然后自动打开浏览器啊,自动刷新的已经可以完成这些功能了,对吧?那我们开发已经能节省我们很大一部分在开发中的等待时间。但是呢,也有优化的空间,比如说在开发环境中,开发环境中我们会用到几十个或者上百个GS文件,会用到几十个csi文件,这都是有可能的。那我任何一个文件的一个小小改动,虽然DV server能帮我们自动编译打包,但是呢,它会把这个几十个上百个文件都重新给我们编译打包一次。而我们只需要什么,只需要热加载,哪个文件变了,我们就只把这个变化的文件打包加载就可以了,其他不用动。这也能提高我们什么?自动编译打包的这样的一个速度。所以呢,这是开发环境,我们需要优化的,呃,只给大家介绍一下,咱们会讲很多啊。
02:04
啊,当然也不会讲太多,因为这些呢,讲不讲,就是你用不用,现在也可以开发是那比如生产环境代码优化,那我们可以用一种叫做树描的一些功能,你比如说。JS文件有一些我们在,你比如说我们压缩是代码里边,不管里边你用没用到的代码,他全部我们压缩,对吧,但是有的时候我们是从别人那偷的代码对吧。那你把他的JS文件拿过来,你也不知道哪些你你用哪些,你不用对吧,里边有100个函数,那有可能就用了一个。那么我们怎么办呢?我们在打包的时候,就只把你用的那个给我们。打包编译起,其他的呢,我们就去掉,这是这样的话是不是也好优化啊,那一个几十K的一个JS文件,那有可能你用完之后就用到不到1K的东西给我们打包进去了,其他没能打包进去就很好了,CSS文件也是一样的,对吧,有可能我们从别人那块下载一个CSS文件,对吧,里边有两万多行。
03:00
对吧,有好几百K,那有可能我们就用到了里边极个别的几个样式。其他东西对吧,那我们也需要这样子去打包去使用。这就是生产环境下边我们需要对代码进行一些优化,那我们呃挑几个重点的,常用的,在开发环境中优化的。呃,优化的功能以及生态环境优化功能咱们去讲解,那这节课呢,咱们就来先认识一下,第一个HR,就是模块热替换,这个呢,呃,应该是在生产环境下的一个优化。那为什么要模块热计化,比如说前面我们写的啊,这个项目对吧。你比如说呃,我们例行一下。嗯,NPM第呃ru位我们开启下。自动给我们浏览器。对吧,他可以。呃,自动刷新,这是我们上节课写的代码,那现在。
04:00
你看一下。现在我们在呃,这里边儿吧。嗯,我们开启一下12。开启F12啊。这个图标这个错误,这个不要紧,这是一个。告诉我们这个图标没有,你再刷新一下就没有了。你看这里边儿,我们cos打印的,这里边都在打印对不对,那我们这里边再加一个,你比如说我在。这里边儿,嗯,再写一个JS文件吧。再新建一个。假如说我们叫做。啊,JS0点我们叫做呃pt.JS吧,随便叫一个JS叫什么都行,对不对,那我做一个。写一个函数叫做啊。输出吧啊,一吸一抽,随便写一个。乙烯好像还重名,那么就叫呆吧。随便的一个函数在这里边,我们打印一下,你看一下,呃,使用反映一下。
05:02
这个pt.GS。中的M。要用了。应用了。在这块,然后呢,嗯,需要假如说返回值吧,这个里边我们点rog一下。直接打一下,然后我们返不返回都行了,这个就无所谓了。那么我们把这个暴露出去,点ex这个。把这个M暴露出去。然后我们在JS文件里边,JS文件里边我们调一下这个。只用。Cost。呃,我们这个叫DEMO。当前目下的啊。你动一下。当然我们这里边儿有。
06:02
嗯。我们把这个功能先先去掉。就是那个E命这些功能,不然的话,我们每次他都给我们查找比较麻烦,我们因为调这个函数我们还没调用,我们可能S保存一下,你看这块就有一些错误,因为它就自动编译了,对不对,然后我们调用一下DEMO。我们在这里边。再往下。这回就没有错了,对吧。那现在你看一下。这是呃,入口文件一行一。然后呢,我们CTRLS保存一下。DEMO。这里边儿。嗯。呃,这是入口文件DEMO。把呆暴露出去。嗯,没问题,在音带的JS里边把DEMO拿过来,然后调一下DEMO,我这里边儿这个文件我在这块再打印一下。
07:00
嗯,高。因为调DEMO里边的时候,这里边有一个有一个输出没有打印出来。啊,这个文件被。加载了PTDS,我保存一下。因为这个比较长啊,你看这个文件被加载了对吧,然后大调用了,是不是这样的一个过程,现在呢,我随便改一个小小的动,小小的一个变化,你看。你看刷新了整个页面这块变化了对不对,自动刷新了,那这个文件也会自动调用了,对吧,那我现在改动这个文件,比如说我在这里面来调一下。二保存一下,你看被调了两次,整个文件也被自动发起了。那同样,CSS文件也是一样的,只要我们改动了其中一个文件,那所有的文件都被加载了。所有的文件都会被自动加载。很麻烦的一件事,对吧,你想想有几十个几百个又怎么办呢?所以呢,这个时候我们就需要用到这个功能,叫做模块热替换。
08:06
那它是web派里边提供的最常用的功能,允许在运行的时候更新各种模块,而无需进行完全刷新,就是哪一个被更新了,哪个模块被更新了,那我们就改哪个模块,那包括样式HTMLGS。当然默认现在我们还做不到,现在开启呢,是很容易,怎么开启呢?开启我只需要在这里边。我们找到第server,在这里边我们再加一个属性hot。有模块热动处。加上这个就可以了,这样的话就开启了,那我们配置文件要改动的话,那他不会监听这个配置文件改变,只会监听自己写的文件会改变,所以呢,我们必须得重新运行一下,看一下,重新运行一下。重新运行一下。那重新运行一下,那我们看一下。既然重新运行了,那么HTM文件能不能热更新?
09:03
我这里边再加一行酒。第二。保存一下。你看变异了,但是酒没有对吧,因为什么?因为你加了这个热更新这样的功能,你看加了热更新加不加成功了,我们把F12打开我们看一下。你这里边儿再编译的时候,我再复制一下,再保存一下。你看到这里边儿已经。这有是HMR对不对。Hot模块replacement对吧,热模块重新替换。这个你看都已经是HMBR了,说明这里边我们已经加载上了,对不对,但是呢,你看有一些什么没有热更新成功或者什么,但是呢,页面的确是更新了,因为我们刷新一下就更新一下,刷新一下就会什么。看到了吗?这个文件就会动一下,而上边呢,RTM文件可以看,嗯,就是没有变化,我们在打印的时候看这里有变化,为什么呢?因为我们开启了针对HTM这呃,HRHR这个功能默认的是没有HMR功能的,也不用去做,因为我们HTM文件都是单独你使用的一个,对吧,它就是全刷新的。
10:10
但是如果你非得要让这个支持。这个HR功能,因为支持HR功能的话,他现在就怎么着就不刷新了,所以要想刷新的话,就得在安全入口文件里边,把这个JS文件引入在这里边。我们到。入口文件这块,这块我们再加一个,把它变成数组。把这个变成数组,然后我们在引入一下src下边的index.html加进来,把这个件加进来,你看这文件加进来之后,它不会重新编译,对不对,那我们退出你配置文件吗?我们再重新运行一下。密影响。然后我们F12也给它开启两个都看着对吧,现在你看一下,我把这个文件修改一下。加。这块你看不着,看不到上面太多了,删掉没有用。
11:04
预留一块删掉它也是修改,你看是不是又更新了对吧,那我这块再来一下D。保存一下。你看有更新了对吧,但是呢,下边GS文件有可能也是GS文件都没有干嘛呀,都没有给我们惹人刷新对不对,都没准刷新,那怎么办呢?那我们继续做,你看假如说针对CSS文件的时候,现在我们看一下可不可以啊,找到我们的一个CSS文件,这里边我们有,嗯,要么是点CSS这块。呃,图片这几个图片啊,这有个boss背景颜色是绿色的,那我们这块写一个div。Div ID等于。把这个开起来保存一下,你看是不是加载进来了,但是现在我们看一下样式是不是热刷新的,我们现在在这里边把被颜色绿色改成blue蓝色保存一下。
12:01
你看它可以更新,但是呢,下边GS啊或者什么。都重新加载了一下。都重新加载了一下,你看加载了这个样式,那我们再把它改成红色。会更新了一下,对吧,那我们现在假如说只想更新什么,只想更新。最后再把它改成绿加一,不然太多了看看。看到那些。其他的没打印对不对,看到了吗。但一般情况下,在开发环境下怎么着,如果只更新这个,我们在哪里做呢?在这个地方。我们需要。用什么?用这个style,用style loader,而不是用这个,我们把它这个B来复制一下,然后我们把它。在。呃,备份一下这块。用插入样式管把它插入到里面去。
13:00
当然,这个文件改变我们很熟悉。你改变一下。拉过来。然后。默认所有的一开启肯定都刷新了,对不对,然后改成嗯,Yellow。你看HMR更新了对不对,只更新了这一个,那其他的样式我们在不做的时候,他就不去更新,只改变当前这个样式就可以了,这个呢,只在这个这个标签里边有效啊使用啊这个老的时候。嗯。啊的时候,因为我们在开发环境中,我们尽一量使用它上线的环境时候,我们采用什么才把它样式提出单独的文件。当然了,我们可以用note的一个环境变量做一个判断,什么是开发环境,什么是运行环境,对不对?开发环境的就这种的是效率比较高的,变异速度也比较快的,用这个。这些文件,那最主要就是GS文件了,现在GS文件的默认也是什么都是没有,呃,HMR这样功能的。
14:05
另外呢,我们处理的时候也只能处理非入口的JS文件,因为入口的文件。必须得加载这个,然后去编译,所以呢,入口文件你带点JS这个文件呢,是必须加载的,必须加载用的。那现在呢,我们这里边儿任何一个文件。这里边任何一个GS,现在在这个JS里边,哪怕我这块稍稍改动一下。你看一下整体都刷新了,整体都更新了,再保存一下。你看并不是热更新,只更新这一个GS。对吧,因为我们的调用其他地方也都。都使用了,所以呢,我们需要在入口文件里边做判断,你想更新哪个模块的时候,你可以在最下边讲什么呢。做一个判断是不这样的。Model。通过这个。接口,通过这个接口,这个接口是干嘛的呢?这个接口呢,会在我们的音带1.htm中,它自动去暴露它。
15:00
在这中配置告诉web派接收什么HR的,这样的功能也比较简单。只要判断它就行了,所以呢,我们这里边只要写一个判断,如果什么呢,Mo点啊hot。如果你是开启那么热更新。那么它就是什么,它就是帧,然后告诉我们开启这个模块,监听什么呢?监听我们这里边的一个文件,使用这个接口,还是它里边port点用AP。监听什么呢?监听我们的这里边儿的一个文件的变化。当然你觉得不用说热更新加载速度的话,你可以不使用。如果是热更新,那这个入口文件它就会只监听谁呀,只监听这个文件的变化或更新其他文件只监听这个文件变化,这个文件如果有变化,那么我们就执行这个回调函数,那这个回调函数你这里边可以随便写,你比如说。
16:01
啊。pi.js这个文件内容。嗯,文件内容有改变。有改变的话,想它这里边儿再重新调一下,加载一下。那我们可以直接怎么着调一下这里边儿的M。好加上这个了,那这回我们再看一下。你看原来不是整体页面都更新吗?现在我这里边儿再有点改变。我把这个都清掉啊。都清掉,你看我把这个改掉一下。看到了吗?这里边只加载了这个。没有把整个其他的都摆一下。看一下。只加载了这个文件对吧,重新加载这个文件,你看这个文件都没执行,调用都没调用,所以这里面的所有输出他都没执行。
17:00
但是呢,能监测到这个文件给改变了,对不对,给改变了。是这样的一个情况,这就是热更新。也是开发的时候其实呢也挺麻烦,如果你的文件很多的话,我们才用这种,呃HMR,如果文件很少的话,这个你像优化加不加都可以,所以我们说在做优化的时候,不是说所有的都需要优化,根据情况去看,那有的时候就你你写的这个文件很少的话,假如说你能忍受这个打包,所有的打包的这样的时间,可以不加这样的功能,对吧,还繁琐。啊,这节课我们就。
我来说两句