Chunk是什么?

webpack打包的过程种,生成的JS文件,每一个JS文件我们都把它叫做Chunk

我们可以看下打包的过程

image.png

main.jschunk Namemain
vendors~lodash.jschunk Namevendors~lodash
所以,每个JS文件,实际上都是Chunk

Chunk有什么意义呢?

假设我们配置的minChunks是2

image.png

假设我们要引入lodash这个第三方的库,那么到底要不要对它进行代码分割呢?可以比对它是否符合我们的配置条件
lodash对于chunks和minSize配置都是满足的,但是它能不能满足minChunks呢?怎么来判断呢? 假设我们整个项目打包运行过后,在dist目录下会生成很多个Chunk文件,那如果有2个以上的文件需要lodash,那么就需要对lodash进行Code Spliting,也就是单独生成一个lodash.js这样的文件来实现代码分割。
假如生成的多个Chunk文件 ,只有一个Chunk文件用到了lodash这个库,而我们的minChunks是2,那么lodash就不会被代码分割。

还有就是,一般情况下,我们只需要配置chunksall就可以啦

image.png

因为当我们不配置其他的时候,其他配置就是默认项。chunks默认值是async,如果我们想同步和异步的都进行代码分割,需要改为all;如果就是想要做自己风格的代码分割的话,可以去进行详细配置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作者:小 boy (沪江前端开发工程师)本文原创,转载请注明作者及出处。原文地址:https://www.smas...
    iKcamp阅读 2,774评论 0 18
  • 对于之前webpack使用与配置(上)的补充 使用typescript时需要在根目录下创建一个tsconfig.j...
    XJBT阅读 497评论 0 2
  • 一、入坑初探 1. 设置项目为私有 我们只需要在package.json文件中配置,因为是私有项目不需要向外部暴露...
    zxhnext阅读 2,058评论 0 15
  • section-3.1 Tree Shaking 概念详解 当引入一个模块的时候,只引入需要的代码,而不是所有的代...
    羽晞yose阅读 626评论 0 1
  • 1.大学最后半学期,就直接到野外实习去了!一边做着毕业设计,一边学着“业务”,说实话其实就是干体力活!还要时刻保护...
    GreatWall_Z阅读 406评论 2 5