Web前端框架通用技术 webpack5 17_开发环境的优化HMR模块热替换 学习猿地原创

大家好，我是学习园地的特约讲师高若峰，上节课呢，咱们介绍了开发服务器的配置，也就是DSO的配置，那学了前边的所有的课程呢，其实呢，你已经可以用wepad去做，嗯，开发工具去开发你的项目了。那我们接下来要学什么呢？虽然我们可以开发了，但是呢，我们有的时候呢，也要去做一些优化的设置。优化什么呢？优化我们分两方面来优化，一部分呢是优化我们的开化环境，一部分是优化我们的生产环境，其实这里面生产环境是我们最需要优化的，比如说。我们把代码上线运行，那代码如果优化好的话，它的性能会提高，用户访问速度会很快，体验会很好，所以这是我们最需要去做的，对吧？其实咱们前面的一些默认配置呢，已经帮我们做了很好的一些优化，比如说压缩的功能，对吧？这些功能都是在代码环境里边帮我们做的一些优化，那开发环境我们还需要做哪些优化呢？也有很多，就比如说。

虽然我们的div server就是我们的开发服务器，已经能够帮我们自动编译打包，构建我们的代码环境，然后自动打开浏览器啊，自动刷新的已经可以完成这些功能了，对吧？那我们开发已经能节省我们很大一部分在开发中的等待时间。但是呢，也有优化的空间，比如说在开发环境中，开发环境中我们会用到几十个或者上百个GS文件，会用到几十个csi文件，这都是有可能的。那我任何一个文件的一个小小改动，虽然DV server能帮我们自动编译打包，但是呢，它会把这个几十个上百个文件都重新给我们编译打包一次。而我们只需要什么，只需要热加载，哪个文件变了，我们就只把这个变化的文件打包加载就可以了，其他不用动。这也能提高我们什么？自动编译打包的这样的一个速度。所以呢，这是开发环境，我们需要优化的，呃，只给大家介绍一下，咱们会讲很多啊。

啊，当然也不会讲太多，因为这些呢，讲不讲，就是你用不用，现在也可以开发是那比如生产环境代码优化，那我们可以用一种叫做树描的一些功能，你比如说。JS文件有一些我们在，你比如说我们压缩是代码里边，不管里边你用没用到的代码，他全部我们压缩，对吧，但是有的时候我们是从别人那偷的代码对吧。那你把他的JS文件拿过来，你也不知道哪些你你用哪些，你不用对吧，里边有100个函数，那有可能就用了一个。那么我们怎么办呢？我们在打包的时候，就只把你用的那个给我们。打包编译起，其他的呢，我们就去掉，这是这样的话是不是也好优化啊，那一个几十K的一个JS文件，那有可能你用完之后就用到不到1K的东西给我们打包进去了，其他没能打包进去就很好了，CSS文件也是一样的，对吧，有可能我们从别人那块下载一个CSS文件，对吧，里边有两万多行。

对吧，有好几百K，那有可能我们就用到了里边极个别的几个样式。其他东西对吧，那我们也需要这样子去打包去使用。这就是生产环境下边我们需要对代码进行一些优化，那我们呃挑几个重点的，常用的，在开发环境中优化的。呃，优化的功能以及生态环境优化功能咱们去讲解，那这节课呢，咱们就来先认识一下，第一个HR，就是模块热替换，这个呢，呃，应该是在生产环境下的一个优化。那为什么要模块热计化，比如说前面我们写的啊，这个项目对吧。你比如说呃，我们例行一下。嗯，NPM第呃ru位我们开启下。自动给我们浏览器。对吧，他可以。呃，自动刷新，这是我们上节课写的代码，那现在。

你看一下。现在我们在呃，这里边儿吧。嗯，我们开启一下12。开启F12啊。这个图标这个错误，这个不要紧，这是一个。告诉我们这个图标没有，你再刷新一下就没有了。你看这里边儿，我们cos打印的，这里边都在打印对不对，那我们这里边再加一个，你比如说我在。这里边儿，嗯，再写一个JS文件吧。再新建一个。假如说我们叫做。啊，JS0点我们叫做呃pt.JS吧，随便叫一个JS叫什么都行，对不对，那我做一个。写一个函数叫做啊。输出吧啊，一吸一抽，随便写一个。乙烯好像还重名，那么就叫呆吧。随便的一个函数在这里边，我们打印一下，你看一下，呃，使用反映一下。

这个pt.GS。中的M。要用了。应用了。在这块，然后呢，嗯，需要假如说返回值吧，这个里边我们点rog一下。直接打一下，然后我们返不返回都行了，这个就无所谓了。那么我们把这个暴露出去，点ex这个。把这个M暴露出去。然后我们在JS文件里边，JS文件里边我们调一下这个。只用。Cost。呃，我们这个叫DEMO。当前目下的啊。你动一下。当然我们这里边儿有。

嗯。我们把这个功能先先去掉。就是那个E命这些功能，不然的话，我们每次他都给我们查找比较麻烦，我们因为调这个函数我们还没调用，我们可能S保存一下，你看这块就有一些错误，因为它就自动编译了，对不对，然后我们调用一下DEMO。我们在这里边。再往下。这回就没有错了，对吧。那现在你看一下。这是呃，入口文件一行一。然后呢，我们CTRLS保存一下。DEMO。这里边儿。嗯。呃，这是入口文件DEMO。把呆暴露出去。嗯，没问题，在音带的JS里边把DEMO拿过来，然后调一下DEMO，我这里边儿这个文件我在这块再打印一下。

嗯，高。因为调DEMO里边的时候，这里边有一个有一个输出没有打印出来。啊，这个文件被。加载了PTDS，我保存一下。因为这个比较长啊，你看这个文件被加载了对吧，然后大调用了，是不是这样的一个过程，现在呢，我随便改一个小小的动，小小的一个变化，你看。你看刷新了整个页面这块变化了对不对，自动刷新了，那这个文件也会自动调用了，对吧，那我现在改动这个文件，比如说我在这里面来调一下。二保存一下，你看被调了两次，整个文件也被自动发起了。那同样，CSS文件也是一样的，只要我们改动了其中一个文件，那所有的文件都被加载了。所有的文件都会被自动加载。很麻烦的一件事，对吧，你想想有几十个几百个又怎么办呢？所以呢，这个时候我们就需要用到这个功能，叫做模块热替换。

那它是web派里边提供的最常用的功能，允许在运行的时候更新各种模块，而无需进行完全刷新，就是哪一个被更新了，哪个模块被更新了，那我们就改哪个模块，那包括样式HTMLGS。当然默认现在我们还做不到，现在开启呢，是很容易，怎么开启呢？开启我只需要在这里边。我们找到第server，在这里边我们再加一个属性hot。有模块热动处。加上这个就可以了，这样的话就开启了，那我们配置文件要改动的话，那他不会监听这个配置文件改变，只会监听自己写的文件会改变，所以呢，我们必须得重新运行一下，看一下，重新运行一下。重新运行一下。那重新运行一下，那我们看一下。既然重新运行了，那么HTM文件能不能热更新？

我这里边再加一行酒。第二。保存一下。你看变异了，但是酒没有对吧，因为什么？因为你加了这个热更新这样的功能，你看加了热更新加不加成功了，我们把F12打开我们看一下。你这里边儿再编译的时候，我再复制一下，再保存一下。你看到这里边儿已经。这有是HMR对不对。Hot模块replacement对吧，热模块重新替换。这个你看都已经是HMBR了，说明这里边我们已经加载上了，对不对，但是呢，你看有一些什么没有热更新成功或者什么，但是呢，页面的确是更新了，因为我们刷新一下就更新一下，刷新一下就会什么。看到了吗？这个文件就会动一下，而上边呢，RTM文件可以看，嗯，就是没有变化，我们在打印的时候看这里有变化，为什么呢？因为我们开启了针对HTM这呃，HRHR这个功能默认的是没有HMR功能的，也不用去做，因为我们HTM文件都是单独你使用的一个，对吧，它就是全刷新的。

但是如果你非得要让这个支持。这个HR功能，因为支持HR功能的话，他现在就怎么着就不刷新了，所以要想刷新的话，就得在安全入口文件里边，把这个JS文件引入在这里边。我们到。入口文件这块，这块我们再加一个，把它变成数组。把这个变成数组，然后我们在引入一下src下边的index.html加进来，把这个件加进来，你看这文件加进来之后，它不会重新编译，对不对，那我们退出你配置文件吗？我们再重新运行一下。密影响。然后我们F12也给它开启两个都看着对吧，现在你看一下，我把这个文件修改一下。加。这块你看不着，看不到上面太多了，删掉没有用。

预留一块删掉它也是修改，你看是不是又更新了对吧，那我这块再来一下D。保存一下。你看有更新了对吧，但是呢，下边GS文件有可能也是GS文件都没有干嘛呀，都没有给我们惹人刷新对不对，都没准刷新，那怎么办呢？那我们继续做，你看假如说针对CSS文件的时候，现在我们看一下可不可以啊，找到我们的一个CSS文件，这里边我们有，嗯，要么是点CSS这块。呃，图片这几个图片啊，这有个boss背景颜色是绿色的，那我们这块写一个div。Div ID等于。把这个开起来保存一下，你看是不是加载进来了，但是现在我们看一下样式是不是热刷新的，我们现在在这里边把被颜色绿色改成blue蓝色保存一下。

你看它可以更新，但是呢，下边GS啊或者什么。都重新加载了一下。都重新加载了一下，你看加载了这个样式，那我们再把它改成红色。会更新了一下，对吧，那我们现在假如说只想更新什么，只想更新。最后再把它改成绿加一，不然太多了看看。看到那些。其他的没打印对不对，看到了吗。但一般情况下，在开发环境下怎么着，如果只更新这个，我们在哪里做呢？在这个地方。我们需要。用什么？用这个style，用style loader，而不是用这个，我们把它这个B来复制一下，然后我们把它。在。呃，备份一下这块。用插入样式管把它插入到里面去。

当然，这个文件改变我们很熟悉。你改变一下。拉过来。然后。默认所有的一开启肯定都刷新了，对不对，然后改成嗯，Yellow。你看HMR更新了对不对，只更新了这一个，那其他的样式我们在不做的时候，他就不去更新，只改变当前这个样式就可以了，这个呢，只在这个这个标签里边有效啊使用啊这个老的时候。嗯。啊的时候，因为我们在开发环境中，我们尽一量使用它上线的环境时候，我们采用什么才把它样式提出单独的文件。当然了，我们可以用note的一个环境变量做一个判断，什么是开发环境，什么是运行环境，对不对？开发环境的就这种的是效率比较高的，变异速度也比较快的，用这个。这些文件，那最主要就是GS文件了，现在GS文件的默认也是什么都是没有，呃，HMR这样功能的。

另外呢，我们处理的时候也只能处理非入口的JS文件，因为入口的文件。必须得加载这个，然后去编译，所以呢，入口文件你带点JS这个文件呢，是必须加载的，必须加载用的。那现在呢，我们这里边儿任何一个文件。这里边任何一个GS，现在在这个JS里边，哪怕我这块稍稍改动一下。你看一下整体都刷新了，整体都更新了，再保存一下。你看并不是热更新，只更新这一个GS。对吧，因为我们的调用其他地方也都。都使用了，所以呢，我们需要在入口文件里边做判断，你想更新哪个模块的时候，你可以在最下边讲什么呢。做一个判断是不这样的。Model。通过这个。接口，通过这个接口，这个接口是干嘛的呢？这个接口呢，会在我们的音带1.htm中，它自动去暴露它。

在这中配置告诉web派接收什么HR的，这样的功能也比较简单。只要判断它就行了，所以呢，我们这里边只要写一个判断，如果什么呢，Mo点啊hot。如果你是开启那么热更新。那么它就是什么，它就是帧，然后告诉我们开启这个模块，监听什么呢？监听我们这里边的一个文件，使用这个接口，还是它里边port点用AP。监听什么呢？监听我们的这里边儿的一个文件的变化。当然你觉得不用说热更新加载速度的话，你可以不使用。如果是热更新，那这个入口文件它就会只监听谁呀，只监听这个文件的变化或更新其他文件只监听这个文件变化，这个文件如果有变化，那么我们就执行这个回调函数，那这个回调函数你这里边可以随便写，你比如说。

啊。pi.js这个文件内容。嗯，文件内容有改变。有改变的话，想它这里边儿再重新调一下，加载一下。那我们可以直接怎么着调一下这里边儿的M。好加上这个了，那这回我们再看一下。你看原来不是整体页面都更新吗？现在我这里边儿再有点改变。我把这个都清掉啊。都清掉，你看我把这个改掉一下。看到了吗？这里边只加载了这个。没有把整个其他的都摆一下。看一下。只加载了这个文件对吧，重新加载这个文件，你看这个文件都没执行，调用都没调用，所以这里面的所有输出他都没执行。

但是呢，能监测到这个文件给改变了，对不对，给改变了。是这样的一个情况，这就是热更新。也是开发的时候其实呢也挺麻烦，如果你的文件很多的话，我们才用这种，呃HMR，如果文件很少的话，这个你像优化加不加都可以，所以我们说在做优化的时候，不是说所有的都需要优化，根据情况去看，那有的时候就你你写的这个文件很少的话，假如说你能忍受这个打包，所有的打包的这样的时间，可以不加这样的功能，对吧，还繁琐。啊，这节课我们就。