00:00
OK,上一节呢,我们演示了多入口对应多输出。那么这个时候呢,我们还可以再做一个优化。就是这多个入口,如果他们使用了同一份代码。那么会发生什么事呢?我们一起来研究一下。好,现在呢,我们把这个所有东西复制一份,在创建一个新的文件夹,叫DEMO2粘贴啊,放放进来,我们接下来呢,新建一个公共模块叫messages。在这里面呢,我们写上一个之前我们定义好的一个方法上。对吧,我们来每家求和。好,我们第这个这个累加的方法,然后呢,APP用上,咱们的内D也用上。
01:00
其实这个方法里面还可以再去写些东西啊,但咱们呢,这里就没有一点写了。我们就也简单演示一下就OK了啊。那么在many JS中也去这样做一下。OK,那么这时候打包的话呢,我们希望什么呢?我们希望这个公共代码呢,应该只打包一份,不要生成两份。因为一旦生成两份,万一下来我有个代码使用了十次,送了十次,对吧,在十个入口复用十次,它会打包十份,那么这个体积就会变得更大,如果只生成一份的话,那么我们就可以去尽可能的复用代码。但是现在呢,他。就做不好。我们来运行一下,这里呢,记得要下载一下依赖,因为我们前面是DEMO1下载依赖,但是DEMO2没有啊,每一个DEMO里面的依赖呢,都需要单独的进行下载,单独管理,下载完之后呢,我们打包一下。
02:10
观看一下打包后的效果。OK,打包完成之后呢,你会发现就是你看这个app.js里面。它有这个reduce方法,Many里面也有这种方法,有用这个方法呢,它没有起到复用的作用,而是分别打包了两次。那么这样呢,是不太好的。这还性能吧?体积会变得更大。我们希望的就是这个,如果这两个文件中有复用的代码,应该单独打包成一个文件,然后他们去复用,这样会更好一点。好的,那么我们想做这个怎么做呢?诶,这时候我们需要额外进行外pad配置。配置呢,我们在这个文档中有写比较长,所以我们一起来看一下。
03:03
OK,就是这里复制。我们需要配置optimization。那么注释部分呢,都是它默认值啊,注释部分都是默认值,我们一起来研究一下,从上到下。Optimization就是我们所有涉及到压缩代码对吧,或者一些优化的部分呢,都会以在这里来做,那么speed trunks呢,就是分割trunk,串是什么呢?创就是我们打包进来的资源APP,那么打包生成的这个它会把APP依赖的所有资源打包成一个模块,这个模块就是串,它会把魅JS打包成成一个模块,这个模块也叫串,打包进来的资源是串,输出数据叫ble。好SP串呢,就是对打包输输打包的这些APP进行代码分割,串就是所有串都需要进行分割。然后呢,以下呢,还有一些默认值,我大概看一下,它要求分割的体积最小是。
04:03
20KB单位是BY,所以是连起来就是20KB千字键。然后呢,还有这个类似于be size啊,确保最后提取的文件不能为零,因为大小为零的模块没必要提取。然后至少M串呢,至少被引用两次,一次以上,它才会被代码分割,如果你的代码都没引用,没必要分割,然后呢,我们最大的请求数量呢,是30个啊。同意,比方这个页面我同时加载文件,只能最大加载30个文件。如果有31个怎么办呢?它就会合并到其中一个文件中,确保最大数量只有30个,有的超过30个文件,它就不会再抽取成模块了。因为我们把文件提取出来打包,单独打包啊,它的确能做到体积小,从而并行下载速度快,但是大家新的问题就是请求数量会更多,对服务器来讲压力会过大,所以我们综合一下啊,不要超过30个。以及最开始加载请求的数量不能超过30个。
05:04
然后呢,以及啊设置啊,强制要求超过50KB的大小的包啊,一定要求会打包,这个时候就不看你引用次数的限制啊,还有你的这个什么啊什么请求数量了,超过这个大小一定要打包,因为体积太大了。同时打包的时候呢,需要配置这个cash组,也就是说我们打包的模块要打包到哪个哪个文件中去,通过cash组来命名,它默认有两个组啊,Deft Windows。Aul Windows这里面有个值叫test test就是哪些文件啊?那么test not MOS,意思就是not Mo里面代码会打包到这个default Windows这个图中。这里是优先级权重啊。然后呢,还有就是如果它被封拆分开来了,它就会复用,而不是生成新的模块,尽可能复用吗。然后剩下的模块呢,我们现在走的这些模块呢,走的是default。啊,Default means2呢,就是它至少被用两次。
06:02
那么就会被才会被打包到这个default里面,群众呢,比上面稍微低一点,所以他优先考虑的是上面这个啊,上面这个考虑完了。才会考虑下面这个。而且这里写的这个mean串呢,上面这个M串为一,下面这个M串二,也就说这里会覆盖掉它的配置,也是这个配置就没了,那这里在这个组中啊,这个配置生效,同时这里面上面没有写的配置会直接照搬上面的配置。也就是说,这一块的配置属于所有组中的公共配置。然后呢,没有写的他就会用上,而下面写的配置就会覆盖掉上面的配置,当只对当前组生肖。说了这么多呢,看起来好像很复杂,但是因为它是默认配置,实际上我们都不需要调,我们只要写个传,激活它就好了。对吧,然后呢,我们这里呢,只需要配置组的话呢,因为这个Windows呢,我们这里models这个代码没有,如果有的话呢,也是默认用它的这个配置就好了,我们只要安排这个default就好。
07:12
这里就要再说明一下,它的代码风格是这样的,多入口,有几个入口,它一定会有几个输出,这里完全不看optimization,它一定有几个入口就有几个输出,所以我们输出文件一定有两个。那么接下来他到底要不要输出多的一些文件,那么就要看这个chance了。我们现在的需求是他们这里服用了同一个这个。啊,一个加法的函数,我们希望把这个加法函数提取成一个单独文件去复用,对吧。那么我们这里就要配置一些cash组来让它打包进去,我们就直接用这个default就好了,那么之前它也有default,为什么没有打包进来呢?因为它有一个要求,就是size要求是20KB。没有设置嘛,它所以它最小值是20KB。
08:00
20KB才会被打包,但是我们的文件显然没有20KB,所以我为了让他打包呢,我故意把size调为零。啊,其他的都是默认值啊,所以我没有改它。米调为D,这样的话呢,那么我们它就会被打包了啊,所以这时候再打包啊,那么我们这个公共模块就会被打包,包成一个单独的一个JS文件,你看就会成为一个单独的JS文件了,就在这这里面就是我们那个加法函数,而APP和many JS里面它不会去复用那个函数。当然这个复用代码呢,这里面包含了一些代码的逻辑,引入这些模块的逻辑,所以会比较长一点。比较长一点。看似好像代码体积变得更大,但实际开发的时候呢,我们的代码呢会比较大,所以它即使增加了那么一点点,但是因为文件是变形下载的原因,所以也没关系。啊,反而会更加好一点,就是这个。好了,所以我们再来回顾一下这个过程啊,我们遇到了什么需求呢?就是我们多入口的文件啊,发现他们之间有公共的代码需要去处理。
09:06
对吧,那么做更好的做法就是我们希望把公共的这个拈呢,单独打包生成一个公共的模块,这样的话呢,我们试出来这些文件呢,就可以去复用它了。怎么配置呢?这时候就要配置这个optimization SP的配置。Transfer,然后呢,配置cash group组,我们要指定default,实际开发的时候呢,这两个组呢,其实用默认值就足够了,但是因为我们测试的时候,我们这个ma GS文件体积太小了,为了让它打包的话,我才调的命size为零,这样呢它就会被打包了。只要他被引用了两次以上啊,他就会被打包到这个default组中。所以就会生成一个新的文件。OK,那么这样的话呢,代码就能做到更加可复用。好了,这里呢,就是这个波入口打包的时候啊,怎么处理公共模块的一些问题。
我来说两句