23-尚硅谷-webpack从入门到精通-缓存

下来生产环节的一个缓存的配置。好，缓存呢，我们会从两个点出发，一个是从babible入手，对bab进行缓存。一个是呢，我们整体的一个资源，将来的资源的进行缓存啊两种。好，我们来看啊。首先打开我们把缓。OK，在这里面我们去写我们接下来的配置。缓酸的第一点叫BB环酸。那么we缓存什么意思呢？就是我们在写代码的时候，我们永远是这个JS代码呢是最多的啊，像结构和样式呢，要么少呢，要么很少，或者说要么不太多啊。或者即使多的话呢，我们也没做，也没办法做更多的处理。啊，为什么要对BA进行缓存呢？因为BA需要对我们写的GS代码进行编译处理啊，编译成一种我们浏览器的识别的语法，就是所谓的GS的兼容性处理。

而在编译过程中呢，假设我有，比方说100个GS模块，对吧。那我只改动一个其中的一个JS模块，我不可能把所有的这个东西呢，再重新变一，其他99个呢，应该是不变的，对吧。这一点呢，有点跟我们之前的功能一样，我一个模块变，那我其他模块不变，只变这一模块。而在生产环境下呢，又不能用HR功能。因为H呢是基于低于server的生产环境，是不需要于server。而我们想做的是就是B做这个翻译的时候呢，诶，如果我只有一个文件变，那应该是这一个文件变，而其他99个文件呢，它是不变的。那这里呢，我们要做热点就得开启B缓存。DEMO呢，先得把之前的100个文件啊，编译后的一个文件呢，进行缓存处理。然后呢，将来你再去做的时候，发现文件没有变的话呢，他就直接使用缓存了，而不会再去使用，哎，再重新构建一次。所以怎么做呢？诶，只需要在present下面再加个参数，要cash directory为就好了。

好，这个呢，就是开启缓存第二次构建的时候啊。啊，第二次高结石。啊，才会读取缓存。从而速度呢，会更快一些啊，会更快一些。那么这样呢，就是我们第一点缓存，针对我们的这个GS的一个兼容性呢，进行缓存起来，这样呢速度更快更好。好了，那么除了这个bab缓存以外呢，我们还有一种缓存。就是文件资源缓存。好了，那么要做之前呢，我们先要给大家写个例子来演示一下，来感受一下啊。我们新建文件夹叫SC，这里面写些基本代码。好的JS代码。

我们来新建一个JS文件。好重要，是我们的一个我。L。数组的reduce方法去统计求和，统计什么呢？统计求和啊，所有的数的累加的结果啊。比如说PC。统计他们呢，累加这个结果加C初始化能为零啊。这是一个一个加统计的一个函数啊。那么我们就调用一下穿个1234啊是这样，然后呢，我们打印一下。好，那么这是一个非常基本的一个，咱们的一个。我们再去新建个目录加CS。OK，在这里面呢，我们写CS代码。

OK呢，我们简单写1.html。Margin peni。呃，高度呢，百分百。然后再给个background color pink啊，OK。好，那么要切记在index中呢，将这个样式文件的引入啊，引入呢才会被D打包。好引入OK，那么我们最后呢，再新建一个文件。OK啊，新建了个这里面呢，我们将代码好啊。好，来个H1HELLO啊，咱们缓存。OK。那么写到这儿呢，我们就基本写完了一些基础代码啊，这里面呢，就有一个JS代码，一个CS代码，一个驱动代码。那么好，我们呢，使用我们前面的配置去构建一次。啊，构建的时候呢，其实我们可以加上我们前面讲过的一个内容啊叫D啊。

生一个咱们那个调试工具，当然现在咱们其实用不上啊，但是我们可以加上去map。OK，那我们来构结一次。好，来这个构建。啊，随着我们用的东西越来越多啊，那么它的速度呢，会相对来讲会慢一些啊。好，这也是个警告啊，说这个没有CE啊，那么我们可以通过一个语句把它忽略掉，叫做Dis。把它忽略掉。好，我们再试一次，再构建一次。那么他应该没有这个警告了。啊诶就没这个警告了啊，没警告了很好，我们看一下输出后构建后的资源呢，在的下面的下面呢，就会有以上这几个内容啊JS文构建后的CSS是的S，那它也经过压缩了啊，经过压缩了。

那么好，那么我们怎么看这个缓存呢？我们得写一个服务器代码，所以在缓存下面呢，我们再新建个文件叫D。就代表我们的服务器代码。好，那么这里面呢，大家需要懂一些基本的知识，如果不懂的话呢，那么你可以直接使用这个文件啊好，我们来写一下，我们首先我们这。当然，使用QA其实也是一样的啊。等于express调用。然后再通过APP，诶。的一个中间键点。叫做express。暴露出去，我这个必要怎么弄啊。然后后面呢，可以写一些时间啊，比如说它的一个有效期呀，比方说为多久呢？为我们的1000啊，乘以3600，这这么久啊，大概是一个小时啊一个小时。

好，然后呢，最后呢，通过启动这个服务。账号呢，比如说绑定3000就好了啊。那么这样呢，就完成了一个基本的服务器码，那么我们现在呢，要启动这服务器。那么启动服务器指令呢？哎，可以用这个包去启动。那局。当然呢，第二种式呢，你可直接通过这个令去启动啊，一样的也可以启动啊，这两种式使第种式呢，你得全局这个啊才能启动，如果使这种方式呢，只要你安装就启动了。好，我们呢，比如用第二种吧，就大家都不需要再安装包了啊。好，我们直接呢，No在当前no运行这个solid JS文件。好，官标在这说明运行成功了，那么我们就会访问这个3000服务器，访问服务器。

访问服务器地址。来看啊，这个内容呢，就已经出来了啊，整个内容都出来了，我们要去检查看一下can，诶JS那打印出来了啊，我们通过network查看这个资源啊刷新。你会发现呢，它这些资源啊，将来都会来自于我们的cash，来自缓存，来自缓存，我们点开这个这个内容，可以看一下这个response。它呢会设置一个叫做control有效呢，3600秒，说白了就是一个小时啊，然后这两个资源呢，它会被这个control强制缓存一个小时啊。CS文件和JS文件。强制缓存一个小时。好，那么我们也知道啊，当我们代码上线的时候呢，我们对资源呢，都要去做缓存处理，因为做了缓存的话呢，诶将来啊，用户第二次访问的时候就不需要花太多时间，诶你比方说这里就基本上呢，不需要花任何时间就能够拿到这个资源了，速度呢会快非常非常多啊。

那么这种缓存呢，又会带来新的问题，就假使啊，我这个代码有出了代码呢，需要变一下。啥意思呢？我们来找到我们的SC。啊，比如说我GS代码我变了，我不是1234了，我加12345，我需要变。好，需要变的话呢，我们需要重新构建一次啊，我们在终端中打开。重新输入PE构节词。好，稍等一下啊。好构建成功，那么我们刷新看效果，诶有加了个有变成15。没有变啊，对吧。同时我们改一下样式。啊，改成样式，比如说改成deep pink啊，改换了一个颜色啊好，我们再构建一色。

再过这一次。好，我们刷新看效果，它同样的也没有变，这是为什么呢？这是因为啊，当前资源在强制缓存期间呢，它是不会访问服务器的，它是直接读取本地的缓存啊，那么这样呢，就会带来问题。就是啊，假使我们的这个资源呢，在强化的期间，它出现了严重的bug。我们用户，我们开发者呢，需要紧急的修复它，但因为它被强制缓存，所以没办法进行修复。那这时候该怎么办呢？这个时候我们提出给资源名称做些售价。比如说资源名称的后面加一个版本号，哎，那我下次更新的时候，更新的这个版本号，它资源名称变了，那么这个资源呢，就得重新请求。如果资源名称没有变，他才会走走缓存，如果变了就会重新取消。所以这里面呢，有人想，诶，我加上一个哈希值。

好来看怎么改啊，来注意来到这儿，我们设置的后面呢，加上一个哈希值。然后哈进值呢，取十位啊哈值取十位。同样呢，我们在写这个样式文件的时候呢，也可以加上这个哈希值。哎，比方说也取十位，我们看效果看效果啊。然后再给我结一次。好多啊，生成的资源呢，这个JS和C呢，它就会带这个哈希值了啊，你看是不是带个哈希值啊是不是。我们可以把必要的目录给删掉啊，把里面资源删掉啊。我们可以再看，仔细看一下，全部删掉。再重新构建一次。好，你会发现呢，诶这个CS呢和JS呢都带了哈希值，好这个哈希值呢叫1460A1460A。

是这个值啊，好，当然你也可以在这个输出结果日志中看到。好，然后我们再刷新，这时候呢，资源呢，它会一个哈，这个代表。好，那这有什么用呢？就是啊，当我们去修改源代码。哎，我会改回来改成PI啊。啊，一旦你修改了源代码，你再重新构建一次。这个哈希值啊，之所以叫1460A的原因呢，是因为每次外派D打包的时候都会生成一个哈希值，所以它利用的就是这个外派D打包生成的这个哈希值取得前十位而已。当你重新打包的时候呢，它又会生成一个新的哈希值，比如说68AC。那么所以它就会生成一个新的带哈希值的一个文件啊。而H呢，也会引入这个新的带哈希值的这些类似的文件呢，我们可以看一下的下面啊。呃，因为压缩过，我们可以大家看一下啊六八什么什么A，所以你再刷新的时候呢，虽然它有缓存，但是因为文件名变了，所以呢，他又会去服务器重新寻求这个资源。

重启，整体的内容会变。真的会变？那第一种呢，是我们使用哈气纸来做缓存。好，我们可以在上面写点注释啊。好，缓存前面我们做了两种，一种是缓存。也就是我们来的文件资源缓存。B呢，直接直接配置就好了啊，直接配置这个cash director为true，那么就搞定了。这是代步缓存。文件资源缓存呢，我们需要修改的是文件名啊，修改的是文件名。比方说我们给他文件名呢，加了个哈希值。对吧。哈哈。派构建打包。被生成的一个唯一的哈希值。

那么它使用的就是这个哈气纸。那么这个化值呢，其实有个小问题啊，小问题。问题就是比方说我们再演示一下，我们现在呢，改到的是JS文件，再加个六。注意我只改动JS文件啊，我CS文件是没有变的。但是当我们一旦重新打包，那么不好意思。因为我CS文件和JS文件共享的，都是pad打包生成哈值，所以一旦变化，我的JS文件和C文件是一起编的。这样导致的问题就是我们这个资源的缓存呢，又同时失效了。当然效果是能得到的啊，但是那个缓存都同时失失效了。问题就是什么呢？就是啊。因为。和。同时使用。使用一个哈。如果重新打包。会导致。

所有缓存事项。导致所有幌子失效，那这样不太好。所以呢，咱们的这个呃派呢，引入另外一个哈希值叫做创哈。穿它是什么意思呢？我们来看一下啊。好，把哈希值呢改成串哈。串呢，就是你打包来自于同一个串卡，那么哈值就一样。根据这个生成的哈。如果打包。来源于同一个窗口。那么它其实就一样。

那么他们的哈希值就一样啊，好，那么我们来构建输出一次，看效果再仔行。好，这时候呢，你会发现这CS和GS哈，其实还是一样的，还是什么什么什么值啊，还是一样的，为什么是一样呢。创始我们就不演示了，我们现在演示的结果是它们还是一样的。现在问题就是。GS和CS哈，其实还是一样的。为什么呢啊。因为。啊，CS是在JS中被引进的。所以属于一个窗口。好，前面我们介绍过一个的概念啊，这个的概念什么意思呢？啊，比方说。

我们一个入口文件对吧，这是一个入口文件，而这个入口文件呢，它又引入其他依赖，比如说什么CS文件啊，其他JS文件这些依赖，这依赖最终会跟着入口文件形成一个文件，这一个文件呢，我们叫串，也叫代码换啊，这叫串。所有根据入口文件引入的东西呢，都会生成一个串口，都会变成一个窗口，而我的样式文件呢，就是在JS中入口JS中被引进来呢，所以同属一个串口，那么它其实就是一样的。所以哈什呢，还是不行，所以最后的解法是叫可能哈什。他们会根据文件的内容来生成哈希值。那么不同的文件，那哈希值一定不一样。并且是B，它们是单独管理的。

啊，就是这样的。所以我们这时候再来看效果，再来看效果，我们将这个串改成这个。再来看一次效果啊。来，郑玉琪。拍了。好，这时候那么再看。呃，输出的我们可以打开这个输入的结果呢，你看C哈，指的是第一期什么来着啊，那么JS他指的是F21啊，F21我们可以在这再看啊。好，当然这样看的话呢，你需要把之前的删掉啊，否则的话呢，你看不出来再运行。好，你看还是七还是个F21说，只要文件内容没变，不管你多少多少它的内容呢，它的这个哈是不变的。所以我们刷新刷新页面啊，好这样呢，第一次要加载文件，好第二次呢，他们就会来自于缓存了，来自于缓存。好，这时候啊，我们来尝试修改JS代码。

呢，比如说删掉还是1234啊，我们重新构建一次。注意样式文件的是1723啊。好样文件呢，还是没有变D723，但是GS文件变了，变成CC4CF7了，所以当我们刷新的时候呢，因为GS文件变了，所以GS缓存失效啊样样式文件缓存还是可以的，我们看效果刷新，你看样式文件呢还是走缓存啊，JS文件呢，没有走缓存啊，重新发的请求。啊，就这样的关系。黄婷呢，再刷新呢，第二次，第二次呢又会怎缓存。我们最后呢，验证一下样式文件。我要去改成样式，改成pink。好了，改了一下，我们再重新构建一次。央视文件的那个D230啊，D230就会变成一个什么80EF啊，那JS呢是C4CF7没有变。所以我们刷新的时候呢，它样式缓存应该失效啊，JS缓存呢，应该是没有问题的，你看GS缓存还是做缓存，那样式缓存呢是失效的。

所以啊，我们只要维护这个哈希值的变化，就能控制这个资源呢，到底是有更新还是没有更新。而要维护这哈值变化呢，有三种哈值啊，这个呢，也是可能大家会遇到的面试题。就是就哈西和和这个他们三者之间有什么区别？哈希值呢？指的是每次外派构建时，都会生成一个唯一哈希值。只要你构建一次，不管文件有没有变化，他都会变化。所以这样呢，会有问题。而创开的问题就是，如果你来自于同一个创客，那么他们的哈其实就一样。所以如果你在GS中去引入CS，那么这个GS和CS的哈希值就会绑定在一起，这样不行。所以最后呢，有最后的结论，就是可能他是。会根据文件内容去生成一个哈希值，所以呢，不同文件哈希值一定不一样。那那么加上可他什呢，将来就可以对我们的资源呢进行更加有效的控制了。

那么这以上呢，就是我们对缓存的一些处理。那么缓存呢，就能够帮助我们啊，诶，比如说B缓存，它重要就是把我们。让第二次打包速度更快啊，是第二次打包速度更快。而这个哈希值可能哈是帮我们干嘛呢，哎，让代码上线。上线运行啊。缓存。是帮我们做上线代码的性能优化的啊，是当我们做上线性能优化。所以啊，我们在做一些优化的时候，我们一定要考虑清楚，就每哪哪个优化呢，它到底是做什么事的啊，所以呢，它能够把我们更加精确的定位到我们要做哪些事情。

好了，那么讲了这些缓存，那么接下来呢，大家可以自己写一写。