webpack打包优化

什么是打包优化？就是要提高速率，两个途径：1.提高打包的速率(npm run build) 2.提高访问的速率（主要讲第二点）

要了解webpack的优化，需要知道三个名称的概念：module、chunk、boundle

module:在代码中，我们使用import引入的每一个文件，就是module，比如node_modules文件夹下面的每个包、我们写的每一个js文件等等都是一个module

boundle:就是我们npm run build打包后，生成的每一个js文件

chunk:顾名思义就是代码块的意思。代码块的概念：比如 index1.js 文件里面引入了 index2.js 文件，index2.js文件引入了 index3.js文件......这样就形成了一个依赖，index1.js 文件把这些依赖全部加在一起，就形成了一个代码块chunk。产生chunk的方式有下面三种：

　　1.在entry中配置的入口，会产生一个chunk。多个入口就会产生多个chunk

　　

 

 

 　　此时会形成两个chunk：main1、main2

　　2.通过splitChunk来分割出来的chunk。在配置optimization.splitChunks时会产生新的chunk

　　3.动态加载时，产生chunk

　　

 　　在inde.js文件中通过函数来动态引入index2.js文件，这时index2.js会产生一个chunk

 

　以上三种情况会产生chunk，通常情况下，一个chunk 会对应一个boundle(一对一关系)，也就是说，假如经过上面三种情况分析产生的5个chunk，最终会打包成5个boundle文件

　chunk概念的理解与产生条件一定要理解，了解了上面的三个概念，就可以开始对项目进行打包优化了。本文只讲拆包（分包）上的优化，其他的（按需加载等等）不讲。

 

背景：打包出来的boundle文件体积非常大（拆包）

方案：boundle非常大，说明我们的chunk代码块的内容非常多，也就是说，很多js文件，最终被打包一个文件里，所以非常大。通过配置wepack的optimization对象的属性来实现将chunk的体积减小（拆包）

optimization的中文意思是最优化、最佳化，就是优化的意思。（以下是optimization的属性）

 

　　minimize:true，开启使用默认的代码压缩工具（webpack自带）进行代码压缩（默认已设置true）

　　splitChunks（分割代码块）是对一个体积大的chunk进行分割，从而达到减少boundle的体积的目的（chunk与boundle是一对一的关系，将原本体积大的chunk分割成多个小的chunk，这样就会将大的boundle形成多个小的boundle）。（通过这里的配置，会形成新的　       chunk哟，看最开始讲的chunk产生的三个条件）

　　splitChunks的配置非常重要，下面主要详细讲解

　　

 

　　里面的配置全部都是为cacheGroups里面的每一个对象进行服务的，也就是说，我在外面写了，就不用在cacheGroups里面的每一个对象一一配置外面配置了的属性，但是可以在cacheGroups里面的每一个对象里重新配置外面的属性，进行覆盖（比如说外面配置了chunk:"async"，那么实际上在cacheGroups里面的每一个对象里面都配置了chunks:"async"，我们也可以为该对象重新定义 chunks:"其他值" 来修改默认的值，不会影响其他的对象）

　　下面开始讲默认配置信息：

　　1.chunks:"async"　　有三个值可写"async"(默认)、"all"、"initial"

　　//"async"------代表只能从动态引入的文件里面进行chunk分割   （动态引入的文件是一个chunk哟）

　　//"initial"-------代表只能从入口文件进行chunk分割     （入口文件是一个chunk哟）

　　//"all"-----------代表上面两个的集合，从动态引入的文件里面或者入口文件都可以进行chunk分割

　　2.minSize:0，      分割的chunk最小的体积为0字节，如果一个chunk的体积小于0字节，那么就不能对这个chunk进行分割

　　3.minRemainingSize:0，      分割后的chunk不能小于0字节   可以对此进行修改，太小会增加请求的次数，得不偿失

　　4.minChunks:1，      要被分割成chunk的module最少被一个chunk引用(默认配置)

　　5.maxAsyncRequests:5，      被分割的chunk最大的动态引入不能超过5个（比如函数里面import "其他文件"，全部加起来不能超过5个，超过就不能分割这个chunk）（该值为默认值）

　　6.maxInitialRequests:3，       入口文件的chunk不能分割成3个chunk以上（该值为默认值）

　　7.enforceSizeThreshold:50000，      如果体积为大于50000字节，忽略所有的条件并且进行分割（例如体积超过50000字节，但是不满足chunks:"async"这个条件，仍然会被分割）

　　8.cacheGroups:  里面的对象名可以随意给，对象里面的属性如下：

　　　　1.test:/正则表达式/       满足正则表达式时，才会进行分割，

　　　　2.priority:-10                 优先级，数值越大，优先级越高，比如满足cacheGroups里面3个对象的分割条件，那么就按优先级最高的进行分割

　　　　3.reuseExistingChunk:true      当多个chunk引用了同一个module时，这个module只会打包为一次，成为共享的

splitChunks里面的配置都是为cacheGroups服务的，相当于一个公共的样式，cacheGroups里面可以重置这些样式

 

optimization里面还有一个runtimeChunk:false  

 

 比如index.js里面引入了index2.js文件   我只修改index2.js的文件，  打包的时候，index.js对应的bundle名称会发生改变,（index2.js打包处理的boundle修改了，index.js引入的文件名也会作对应的修改）

，index.js没有修改，打包的时候，对应的bundle文件名就不应该修改，而只应修改index2.js文件，要达到这个目的，设置为true时，修改index2.js的文件，  打包的时候，index.js对应的bundle文件名就不会发生改变（实际上会产生一个runtime.js文件，里面保存着相关引用信息）(缓存，作用：当已经发榜后，再修改了里面的index2.js，再发榜，用户就不用再次加载index1.js对应产生的bundle文件了，提高了访问效率)

 

希望对你们在打包优化上有一些帮助