00:00
接下来呢,我们来提升打包构建速度。打包过建速度指的是外派打包,我们整个项目需要花多少时间,我们想把这个时间减少一点。为什么这么做呢?原因很简单,就是在开发中,随着我们项目体积越来越大,它的打包速度越来越慢。有时候慢到很好几分钟,甚至好几个小时都都有。那么非常慢的话呢,导致我们没打包一次要等很久才能去测试,那万一有问题,我们又得重新打包,又得等很久,又得再测试,那么这个时间是极其耗时的。所以我们希望打包工具速度更快一点点,这样的话呢,我们就能够更快的去测试,去检查我们代码的一些情况,那么这样呢,让我们体验更好。所以这就是我们要做的啊,那么首先我们要做的是这个热模块替换hot module replacement。
01:00
好,呃,我们先来介绍一下为什么要用它啊。开发的时候呢,我们可能会改其中的一个模块代码,比如说改一个C代码,改一个这个JS代码,但是WiFi呢,它默认啊,会从那个入口文件开始,会把所有文件重新编译打包,也就说我假设我有100个1000个文件,我只改动其中一个文件,那么所有文件要全部重新编译打包。那么可想而知啊,这个速度是比较慢的。但是我们实际的明明我只改一个模块代码,那我能不能做到只有这一个模块被重新编译打包,其他模块用缓存呢?如果能做到这样打包速度就能很快,是不是?对吧,那么呢,就提供了一个技术叫hot module replacement,翻译过来热模块替换啊,也叫热模替换HM2。它能够提供功能,就是在程序运行中啊,它能够去替换添加或者删除某个模块,而不是要加载整个模块的页面。
02:05
那么怎么做呢?下面我们来演示。而这一个配置呢,它是默认配置啊,所以我们要想演示的话,我们先要把hot调为false。在WIFI4那它不是,但是WIFI5是那个默认配置,这个其实就是关闭,现在这样写就关闭hi。我们关闭它之后呢,我们再启动开发环境的配置,我们来看效果,一旦我修改文件,整个页面都会发生变化,为了看到效果呢,我把我的屏幕分一下屏。左边是我们项目,右边是这个页面,我们仔细看这个页面啊。来,我能改一个吗?诶,正好把我们之前这个报错的地方呢,把它删掉。一保存,诶,你看它整个页面都刷新了,大家注意看这一块啊,它整个页面都刷新了,不是只加载某一个GS,而是整个页面都刷新了。
03:03
我们呢,再看一下,比方说我就改这里面的二减二一保存,诶,它整个页面全部都刷新了,其实这个意思就是它整个页面重新打包,重新加载。弄一下。当然你改样式也是一样的,比如我们改成样式,我们没有把它改成一百一百一保存,哎,又是整个页面全部重新刷新了。那么当你未来这个项目文件比较大的时候,比较多的时候呢,那么这个速度就会很慢,所以性能不好。怎么办呢?要开启很简单,Hot为true就可以了,非常简单,开启HMR。当然这个也是默认值啊。一旦开启H8呢,改了配置,我们要重新启动服务器,它就可以实现这个热模块替换。如模块第一话呢,就是意思就是当我们只改动其中一个文件,它只会对这一个文件进行重新编译打包,我们来看效果,比如说我改成CS,又改回两版。
04:09
必保存,你会发现呢,整个页面没有重新刷新,他在下面给你演示了啊,就是这个inexs发生的变化,所以它重新更新了这一个模块。我们再仔细观察一下,观察整个页面,我们把它300 300。你看整个页面呢,并没有刷新,它每次只更新这一个模块的变化,所以呢。这样呢,会让我们整个项目的这个性能呢,会变得非常好,对吧,它只更新某个模块,没有更新整个项目代码,所以这样呢,它的打包编译速度啊会快很多。那么样式呢,它天然就具备了这个热门换替换的功能,因为我们在开放模式下用了starlo啊,它这里面已经帮我们实现了这个热门话替换。
05:02
而JS呢,目前还没有实现,JS一旦发生变化,还是像之前一样,它需要整个重新打包的,我们改成一一保存。你会发现整个页面还是刷新了啊,整个页面刷新了,因为GS的默认它不能做到这一点。JS默认不行,那么JS要想做到怎么办呢?需要加一段这样的代码,我们一起看啊。首先呢,我们先判断一下它支不支持这个热模块替换。在这里呢,就判断是否支持啊,这个热模块替换功能,因为有些低版本浏览器是不支持的啊。对吧,好,如果支持我们可以用modu上面的一个accept。一方法,我们呢,去重新的去对这个文件进行接收。好,这个意思其实就是接收这个count d GS,一旦count d GS发生变化呢,它就会只加载这个文件发生变化。我们来看效果啊。
06:01
当然注意是count d GS这个模块,我们来到这个count d GS这个模块,比如说我把它再解一个一啊,故意解个一一保存,哎,你会发现它就只更新这看DS其他的就没有更新了是不是。那么你希望萨DGS要也是,但是你some GS没做处理啊,所以some JS呢,如果你在这里面随便改一个值啊。他还是整个页面会刷新,因为萨DS并没有做,所以你希望some d JS也有这个效果的话呢,也需要再写一遍啊,那么这里要接收的是萨DJS,一旦这样接收呢,他就知道了,当这个文件或者下面这个文件发生变化,它就只更新这两个文件,其他文件就不变了。所以这样呢,会让我们代码呢会变的。啊更好一点,这个打包呢,当我们开发模式下,这个打包呢,速度会更快,因为它只更新某个模块。那么所有需要用的模块呢,都需要这样做啊,最终才能达到我们想要的效果。
07:00
所有磨合都这样做。所以实际开发中的,假设我开发100个模块,我要写100个这样的代码,那么就比较麻烦是不是?所以如果你将来开发项目,我们打开啊,如果你将来开发项目。我们可以用比方说开发view项目,我们可以用view开发RA项目,有RA相关的load,它会帮我们自动的实现这个功能。所以是,所以实际开发中呢,我们其实并不需要去写那些代码。如果是你自己搭的角度架,你没有去用这些logo的话。对吧,那么我们是需要像我这样一点点写。但是如果你将来是RA项目或者项目,我们可以使用上人家官方推出的这些load,它会帮助我们自动的实现这个热门话题换功能,也就说你该怎么写组件,定义模块还是怎么定义,那么它自动的会实现这个模块热替换的就不需要你操心了。好了,那么这是热门化替换的功能啊,那么从这里呢,我们也会看到热门化替换的这个接收,这里呢还能接收一个函数。
08:04
这个函数的作用就是,一旦这个文件发生变化,它会调用后面的函数。然后在这个函数里面呢,你可以做一些其他事情,如果你有一些事情要做的话,可以再做啊,当然如果你没有别的事要做的话,可以不写,像我这样可以不写。不写就可以了,不写就可以实现任务化替换了,除非是一旦发生变化,你要做一些其他事,那么你可以在后面再追加,但是通常情况下是不再追加的。好了。以上呢就是模块热替换的功能,它的作用就是能够帮助我们在开发模式下,这个打包变异速度能更快,注意生产模式下是不能用的,因为生产模式它重新打包就得重新打包,他没办法去利用这个模块热替换。生产模式下不行,但是开发模式下是可以的,在低于server里面写个后为处,实际上它也是默认值,所以我们之前其实就开上了,只是对JS文件处理来讲,它需要做一些特殊处理。
09:03
将来开发项目的时候,我们可以使用项目的一些load来帮助我们自动完成这些功能,所以实际后面我们会学习这个,搭建项目加速架的时候呢,我们会用上它。好了,那么这以上呢,就是模块热替换。HM。
我来说两句