38-尚硅谷-webpack从入门到精通webpack详细配置之optimization

一个叫做optimization的一个配置的详解。我们来看啊。前面呢，我们在讲优化环境的时候用过这个optimization。在代码分割这里用过啊。这样呢，我们写了个4TRANS v啊，用了个非常简单的方式配置好啊。那么其中呢，它这个分割呢，其中里面有很多的默认配置我们没有看到的，所以接下来呢，我们要研究这里面的详细配置。那么我们来看怎么做？我们。复制一份啊将这个。零三十二吧，复制一份就好了，来个34。叫做optimization。研究这个optimization的一个方案啊，好，我们把前面的都收一收。当然呢，研究optimization呢，必须要在生产环境研究才有意义啊，别的环境就别管了，我们在生产环研究这个optimization。

好，接下来写这个配置啊。Optimization。Organization呢？前面我们用的这个spli用来做代码分割的。好，实际上呢，它的里面的配置啊，有很多可以写的啊，所以我们来一点点写。这是最基本的写法，其中呢，下面还有一大堆默认值代表它的值。比如说第一个叫。等于30乘以1.24。对吧。那么这个代表呢，就是一个。啊风格的串。哎，我们来看风格的串口。最小。为30KB啊，就这个意思，你如果小大于30KB，那么我们才会去分割啊，那么小于30KB呢，我就不分割了，这个size代表这个含义。

好，除了size呢，还size max size啊，有最小，那么就是最大。最大的话呢，通常设置为零啊，默认值也是零。意思就是啊，没有最大是没有限制的啊，不是代表最大，是最大没有。你有多大我都要分割啊，你能KKB分割。所以前面我们在想啊，当你两个代码要进行分割的时候，要提取公共的串口，它必须要大于30KB才会提取，如果小于30KB是不会提取的。I don't mean chance。啊，唯一啊就是呢，我这个串卡啊，要提取的串卡。最少被引用一次。如果一次都没被引用，那说明这个模块不是依赖啊，什么都不是，那别提取了啊，要提取的呢，必须要被最少被引用一次啊，名创呢为one。好了，还有一些参数啊，一些其他参数，比如说max。

A s s one c a s requests。好，Let's request呢代表啊，诶叫做二期加载的时候。某。的最大数量为五，比如说超过五的话呢，那么我就不会去这样做了，我就不会打包成单独的串口了啊，只能只能最多打包五个。那么同样的还有啊，Initial。咱们的一个request。好，这个呢，比为三啊，这都是默认值啊，就是我们的入口啊。最大变型。请求数量。

那么为这个三个啊，不能太多。好，那么还有一个什么凹凸。My name。啊好，那么这个呢。这个呢是意思啊，我们写一下你就知道啊，它是个波浪线。代表的就是我们的这个命名啊，名称的命名的这个连接符啊，是一个波浪线连接，所以也是我们提取的时候呢，它是一个波浪线连接。好，内为处啊，就是代表我可以，哎，可以自由的命名。可以。使用这个内部的命名，可以使用这个命名规则啊。啊，就是比方说这个规则以及下面的规则啊。我们在分割的时候呢，会还会定义一个组，这个组呢，也是为什么我们会进行分割呢，Cash。

那么第一组，那么就是有几组就会分割成几个串口，有两组呢，就会最多呢出两个串口啊。S。啊，Windows。啊，当然了，一组呢属于一种分割的规则啊，不是说两个串法是一组呢，属于一种分割的规则。一种风的规则啊，比如说我们Windows呢，我们来看。通过T去检测一些文件。对吧，哎，这个正则呢，需要这样写啊，写的稍微的麻烦一些。Not么？就是检测not文件啊，然后呢，有一个关于它的优先级。瑞铁啊，好，它的游戏级呢为负十。啊，这个意思啊，就是这个意思，这Windows呢，代表我的风格的一个组，代表Windows啊整个意思呢，就是。

我们直接写啊，就是。啊，中等文件。会被。打包到。这个Windows。Winners啊。这个创造。所以所以呢，我们的，所以这个命名规则呢，它是Windows。啊，这个波浪线加上长杀名字点JS是一个这样的命密规则。波线呢就是因为这里叫波浪线啊，Windows呢是因为这个组呢叫Windows，然后后面查插呢，就看我们的这个模块名称，可能如果是ID的话呢，就是0123啊有这样的关系，点GS文件会变成这样名字。那么打包的话呢，它并不是只有这两个规则啊，它要满足上面规则，比如说它的大小呢，还要满足上面规则。

满足上面的公共位置。然后上面这些规则呢，对下面这些里面的内容呢，是都生效的。如。大小要超过30KB啊，对吧，至少。被引用一次。对吧，那么就必须要必须要满足上面的规则才可以做啊，这个属性呢，意思呢，是优先级的关系啊优先级。A级为负十。打包的优先级啊。好，第二个组的默认组呢，叫做default默认组。Default defat呢，这里面有个二。这意思什么呢？哎，前面说了，就是要提取的串口呢，最少要被引用两次啊。后一次的话呢，就不提取了啊，就不提取了，这里呢，必须有两次这个规则，就是这个规则覆盖了上面这个值啊，覆盖上面这个值。

然后优先级呢，稍微低一点啊，先把搞定再来搞定，我的优先级稍微点，怎么呢，负20就比你低了或者负十。好，然后呢，还有一个属性啊，为了让它代码能复用。Insist。这个。没错啊。啊，这个意思呢，就是啊。如果当前要打包的这个。和之前。已经。已经啊。已经被。提取的模块。是同一个。

啊，就会服用。就会服用啊。而不是重新打包模块。就这。那这个东西呢，就是为了让我们复用而存在的，比方说啊，之前我们这里我可能有多入口吧，多入口对吧，有个A入口，有B入口，可能A入口里面呢，引入了整，B入口里面也引了整，那之前的整已经被重新打包了，对吧，那我不可能还重新打包一次。例引了，这里也一次赢了两次啊。连了两次的话呢，那么它就会，诶，这里会单独提取成一个串串好，那下面呢，就不会再重新打包了，而是会复用上面的这个值。就是为了解决这个重复打包的一个问题啊，所以要添加这个属性。所以呢，其实下面的都是默认值啊，就是我们其实不用写的，直接直接使用默认值就好了，所以下面这个值呢，哎，我们可以全部注是默认值啊。

一般我们也不会修改啊，一般也很少修改，除非你要做的非常详细。啊，给大家介绍一下，就下面是默认值，我们只要为O就可以了。啊，Transfer为二就可以了，所以呢，这就是我们分割的一种方案啊，所以这也是为什么我们说not里面东西呢，会被打包在一起，而且呢叫做Windows。而下面这个东西呢，就是当我多入口的时候，有引入同一个依赖，且依赖的大小超过30KB，那么我就会打包成一个模块，打包一个模块，并且这个模块呢，不会因为这个属性的原因不会重复打包。这就是这个原因啊。那我们呢，只需要这样写就好了。那这种打包呢，会存在一个小问题啊，还存在一个小问题。好，还记得咱们之前的缓存策略吗？我们来记得啊，在这里呢，我们写一个。

这种码分割呢，还存在一个小的问题，我们要研究一下。好，为十我们来打包一次啊。我CS呢就不研究了，我们只看JS文件，主要是研究JS。好，JS下面呢，我再新建个文件叫AJS吧。S。我。Return X加Y，好，那么我们index呢，去引入它，然后打包啊，那么引入到为了让它分割出来代码呢，我们通过语法呢，能够让它分割成代码。李行汉，Edies。对吧，然后方法啊，然后呢，成功的话呢，我们就做一些事情啊，提取这个方法。在里面呢，调用这个X的方法诶。加个一二。然后呢，把结果呢打印一下。

OK，那么这里呢，就写成了这个咱们的indexs的一些内容。好，因为我是通过语法，所以呢待会呢，它会分割成两个JS文件，我们来看效果啊。呃，我们这里多了个分号啊，Con代码的58行，我们来看一下啊，Con代码的58行，诶这呢多了个分号。不对啊，应该是这里面多了个符号，这里面少写了一些内容啊，我们注释的时候应该注释到这啊。呃，这样的应该是对的啊，这样才是对的，我们再运行啊，注释是错了。好打包成功啊，这时候呢，你会发现输出的一个JS呢，叫做一点这个JS，第二个呢，是叫many这个JS啊。那么这个东西呢，之所以叫一，是因为这个命名规则呢，这里叫做一啊，我们说了想要改它的名字呢，有两种方式，第一种这里加上一个创。

对吧，用上我们之前的内容啊，Name，然后它命名啊，是name加上一个表，它是打包出来的内容。那当然也输出到JS目录下。那么再运行的话呢，诶，它的名字啊，就会叫做什么什么创DS。那么同学说，哎，这个叫一啊，还是不太好看，还是不好听，怎么办呢？哎，我们可以通过在这里面写个注释啊，写个这样的字符串注释叫做PA。写清楚它具体的名字，比方说叫做A。这时候我们再运行。它就是A杠点GS就是命名了。好了。那么这是这个命名规则啊，这是串命名规则，同样的这个串呢，我们可以给它加个哈希值。

关掉关掉啊，我们来写个哈西值啊。我们的也叫创客，这里加个哈气值吧。来点花西汁啊。垃圾之类也是可能。一样的啊，一样的处理，我们再来看一下效果。好，那么这串呢，也加上了一个哈希值，咱们现在有两个哈希值了啊，那我们要注意。我们需求就是当我们改动了这个as文件，那么理应的index没有变，所以index呢，应该是不要变的啊。但是呢，我们要看啊，我们要注意，我们可以打开这个，我们这里面东西太多了，我们删掉，我们重新来一次啊，再一次。现在有个小问题就是。我们这个JS打包出来的个魅力JS，它里面会保留这个一个哈希值。我们可以往下走。哎，这里你看保留个ec什么A的哈希值，这哈希值呢，就刚好对应的这个串口name。保留哈希值，也就是说这个S啊，因为是作为主文件，它需要引入这个文件的，那为了引入这个文件呢，把这个哈希值给保留下来的。

那这就出问题了。出错地在哪呢？就是当我们如果去改动ADS，比如说再加个东西。就是看法。好，我们说了，它呢，文件内容变了，那么这个A的可能呢，肯定也要变。好，A点可哈的哈希值变了，但是又出问题，就是我们main的卡西值呢，也跟着变了，你可看它输出的结果呢，结果有两个GS。为什么会变呢？因为麦里面它要引用着之前那个文件的哈希值啊，我们可以再找一下啊。要引用这个哈希值，虽然它里面的内容没有变，但是因为引用的文件的哈希值变了，所以这个文件也得变。所以这样呢，会导致缓存失效。具体就是我们有个入口文件。它的依赖呢是A文件，A文件发生变化，因为index里面记录着A文件的哈希值，导致这个文件也变了，那么这是不可取的。

所以这时候怎么解决呢？我们要解决的方法就是要将这个文件里面记录的哈值呢给单独提取出来，单独打包。这样呢，Main文件里面就不记录着这个文件的哈希值，不会出这个问题。那么这个配置呢，叫runtime。Run time。好让他们创造呢，去来看什么意思啊，叫做name。我们来写一下entry points。它这个函数啊，返回值呢，是一个咱们的一个命名规则啊，命名规则呢就叫。对吧，然后呢，取我们这个入口文件的这个名字啊，这个就好了。好，这个意思呢，就是将这个文件的。哈希值啊，对吧，记录的。当前文件，当前模块，我们清楚当前模块。

记录。其他模块的哈希值单独打包成。啊，一个。他不找到一个文件。啊，这个文件的交流time文件啊。我们再看一下效果。商家表达。再构建。好，加了这个runtime串啊，现在呢，我们输出结果呢，会多了一个runtime文件啊，多了个runtime文件我们可以看效果啊，多了个run time文件，那么这个runtime文件呢，就会记录好我们刚才那些值ma文件里面呢，我们可以发下，就再也没有那个哈希值了，你看它的文件大小呢，就小很多了，就没这哈希值了。没正器值呢，当我们去改动ADS，我们再改一次啊。然后就删掉它吧，删掉它我看效果啊。运行。哎，我们看你看A文件因为变了，所以A文件变了，然后A文件变了，因为它的哈希值变了，所以这个runtime文件变了，但是main文件呢，并没有生成新的啊，V文件并没有生成新的，所以呢，我们现在做成到底就是一旦这些模块，比方说啊，我有很多个模块，有ABCD4个模块，对吧，一旦A模块变了，只有A模块和A模块对应的这个软time文件，哎，它会变，然time文件会变。

其他模块呢，很普遍。或者说B文件变了，也只有B和time文件变，其他模块不变。这样呢，能够保证其他模块它的持久缓存的持久化是没有问题的。所以我们这里要注意啊，要解决这个bug，就是我们呢，之前做代码分割的时候一定要加上runtime，否则呢，会导致缓存失效啊。解决问题就是。解决就是。修改A文件。导致。B、文件的发起值变化。我们修改的问题就是我们做法就是把这哈单独提取成一个软文件做的，所以这一块呢，必须要加啊。

好了，到这呢，我们就是主要是这两个操作，第一个呢，是为了分割一些提取公共代码，第二个呢，是为了解决提取公共代码的导致缓存失效的一个问题啊，就是这两个。那么我们的这个配置呢，还有最后一个配置的就叫做mini mini啊。啊。呢，就是帮我们配置。配置。生产环境的压缩方。这压缩方案呢，主要指的是GS压缩方案和CS压缩方案，配置生产环境的这个压缩方案。那么前面我们可能介绍过啊，什么JS呢，是用X去阿加缩的。那么这里要注意一下，就是当我们版本升级到二十四点二十六以上的版本派啊好，现在我们派版本呢，可以通过打开看一下啊。可以看dress。我们现在ipad版本呢，在这个4.41已经远远超过4.26了，所以他现在呢，用的一个库呢，都是一个啊T。

啊，T这个不能去压缩，T这个气压缩的。啊，为什么用这个库呢？因为那个GS呢，它不在维护了啊，啊反而取代，取而代之呢，是这个T这个护呢在维护，所以我们将来去压缩GS都是用T的库去维护。而如果你使用默认配置什么不改的话呢，那就别动它了。如果你想要修改这个这个库的啊内容的话呢，那么我们可以在这里去修改它的压缩的一个配置方案。可以在这修改啊。那么要修改的话呢，首先当然要引入这个这个啊这个库库。The teacher。那么这个库呢，需要大家下载啊，需要向大家下载，所以呢，你需要在外面呢，去把这个库呢下下来啊。NP mi折扣两跌。好下下来之后呢，待会我们就会用上这个库去改一下默认配置啊。

因为呢，默认情况下呢，它的它配置呢，可能不够出色啊，你可以把它改的更加出色一些啊这个插件。怎么做呢，在这里呢，同样的是去new调啊调。啊，这里值是数组啊，写错了，这是值是数组。用插件一样的用法。调啊，在new调用里面呢，去写我们插件的配置啊，在这里面去修改它的配置。A，可以改什么呢？比方说我们写个开始为啊。这个。开启缓存，那么也就意味着我们压缩之后呢，可以走缓存，下次呢就会更快一点啊，也是个优化。然后那个拍呢。A parallel。为出啊，开启多进程打包也是让我们速度更快啊，也是我们速度更快。

也是优化我们的这个速度的啊。然后呢，你需要map文件呢，你需要特别注意啊，需要在这里调为啊，如果你需要MAP1定要调为啊，就是启用这个map，否则的话呢，它会被压缩掉的。所以要注意一下。否则会被压缩掉的，请用ma。好，所以如果你要想把这个压缩呢，做的更好一点，你可在这里修改这个配置啊，修改这个配置。如果你不写的话呢，它会使用一个默认配置啊，是这样的。好，那我们的CS如果你要改配置的话呢，也可以在这里直接写啊，也可以在这写。好了，那么这以上呢，就是我们这个optimization里面的配置了。串呢？能帮我们提取一些公共代码成单独的串打包。然后他们串口呢，解决他的一些问题的啊，需要写一个这个配置，否则的话呢，某一个文件JS文件修改，会导致其他JS文件呢，缓存失效。而mini呢，就是让我们生产环境下呢，压缩GS的时候呢，可以做的更好一点，更出色一些啊，做的一种方案啊。

好，那这里呢，我们之前呢，早就通过OGS呢，已经换成这个ting了，所以大家注意要迁移过来，要迁移过来啊，不要再用oify了。那么这以上呢，就是optimization的一些配置。Organizationization呢，大家大家最重要的就是要掌握前面的这块风格方案啊，大家可以看看里面的详细参数。那么第二个就是要知道runtime的一个作用，它是解决什么问题的。那么我们也写了个小例子给大家演示了一下啊，最终通过这种方式解决了问题啊。最后呢，就是mini麦尔呢，这里面呢，可以去修改我们的压缩的方案啊，可以修改里面的配置。那么我们就讲到这。