2020-11-30Chunk 是什么？（4.7）
2020-12-01 本文已影响0人
夏天的风2020
webpack打包的过程种，
生成的JS文件，
每一个JS文件我们都把它叫做Chunk。
我们可以看下打包的过程
image
main.js的chunk Name是main
vendors~lodash.js的chunk Name是vendors~lodash
所以，每个JS文件，实际上都是Chunk
Chunk有什么意义呢？
假设我们配置的minChunks是2
image
假设我们要引入`lodash`这个第三方的库，
那么到底要不要对它进行代码分割呢？
可以比对它是否符合我们的配置条件
`lodash`对于chunks和minSize配置都是满足的，
但是它能不能满足`minChunks:2 `呢？
怎么来判断呢？
1.假设我们整个项目打包运行过后，
在`dist`目录下会生成很多个`Chunk`文件，
那如果有2个以上的文件需要依赖`lodash`，
那么就需要对`lodash`进行`Code Spliting`,
也就是单独生成一个`lodash.js`这样的文件对它进行代码分割。
2.假设我们整个项目打包运行过后，
在`dist`目录下会生成很多个`Chunk`文件，
只有一个`Chunk`用到了`lodash`这个库，
而我们的`minChunks`是2，
实际上最后打包生成的Chunk里面只有一个用到lodash，
它是小于2，
那么`lodash`就不会被代码分割。
所以minChunk指的是到底打包生成的Chunk里有几个用了lodash
还有就是，一般情况下，我们只需要配置chunks为all就可以啦
image
因为当我们不配置其他的时候，其他配置就是默认项。
chunks默认值是async，
如果我们想同步和异步的都进行代码分割，需要改为all;
如果就是想要做自己风格的代码分割的话，可以去进行详细配置。
