webpack5 splitChunks分割代码

首先明确webpack  自身的打包行为

当splitChunks为false时，此时不启用任何打包设置

可以看到，静态引入全都打到一个chunk里，动态引入会拆分出来一个chunk,这是纯webpack无配置的打包，

webpack会给每个模块打上标记  ,如下

{
moudle:'subtract', //模块名
chunks： 'entry1', //打进哪个chunks
async：false //是不是异步模块
}

{
moudle:'add', //模块名
chunks： 'entry1', //打进哪个chunks
async：false //是不是异步模块
}

{
moudle:'add22', //模块名
chunks： '173', //打进哪个chunks
async：true//是不是异步模块
}

当使用optimization.splitChunks配置的时候，是基于上面打包的行为进行配置的，或者说是一种监控

optimization.splitChunks.chunks = initial时，此时会监控同步模块,{ add , subtract } 

optimization.splitChunks.cacheGroups相关配置也会作用于同步模块，但不会作用于异步模块

我们可以直接在add22模块内部定义chunks为async,就能监控了

optimization.splitChunks.chunks = async时，此时会监控异步模块,{ add22 } 

optimization.splitChunks.cacheGroups相关配置也会作用于异步模块，但不会作用于同步模块

注意 webpack5和webpack4有些默认属性有区别，文档要看清楚再自行测试

例如，之前用webpack4测试 这个坑导致我一直分割不出多个包

  webpack5 {maxInitialRequests: 30}

  webpack4 {maxInitialRequests: 3}

 体会：optimization优化分离代码，重点是分离和修改基本信息，例如拆包和修改文件名，但不能修改模块引入方式，比如把同步变异步，把异步变同步，优化不能改变根本因素