2020-11-30Chunk 是什么？（4.7）

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;
如果就是想要做自己风格的代码分割的话，可以去进行详细配置。

链接：https://www.jianshu.com/p/c73570cb934b