webpack中chunk、module、bundle的关系

先确定一点,我们知道js万物皆对象,那么:webpack中万物皆模块。因为它按照模块来分析。

什么是module

只要可以引用的,它们都是module。例如import、require或者css的@import。
例如:

// index.js文件
import _ from 'lodash';

console.log(_.join(['大郎', '该', '吃药了'], ' '));

这是引入一个lodash模块,同时对于打包分析的来说呈现的结果是:


它是一个module

什么是chunk

bundle 由 chunk 组成。通常 chunk 会直接对应所输出的 bundle,但是有一些配置并不会产生一对一的关系。

通过import或require引入的module,就是chunk。所以有时候chunk是一个最终输出的js文件,有时只是组成bundle中的一部分

什么是bundle

最终的输出文件就是bundle(由chunk组成)。
看示例代码:

// index.js文件
import _ from 'lodash';

console.log(_.join(['大郎', '该', '吃药了'], ' '));

// another.js文件
import _ from 'lodash';

console.log(_.join(['乖', '快', '吃吧'], ' '));

然后运行查看看分析图:


如上就是两个大的bundle

对应的从web加载上看:


这就是两个js文件,是两大bundle(对于最终加载来说其实也是js文件)

其中,代码分离,即splitchunks是离chunks。

关系图

他们的区别关系有两种:


或者是:


总结:手写的或是引用的都是module,webpack处理时按chunk来分,最终输出的是叫bundle。会发现,只是它们只是在不同时期的场景不同叫法而已。

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

推荐阅读更多精彩内容

  • 一、webpack 配置 1. 资源入口 Webpack 通过 context 和 entry 这两个配置项来共同...
    了凡和纤风阅读 1,016评论 0 7
  • Webpack打包 webpack是一款目前主流的模块化打包工具,提供了对前端开发过程中涉及的所有资源的模块化打包...
    彪悍de文艺青年阅读 596评论 0 0
  • 模块打包器:开发一个项目,业务逻辑会很多,开发会按照功能逻辑拆分成一个个的模块,这样开发的时候更加有条理,维护起来...
    谷子多阅读 4,390评论 0 44
  • 1. Tree Shaking 1.1 JS Tree Shaking 1.1.1 本地代码Tree Shakin...
    nimw阅读 933评论 0 0
  • 最近给项目进行webpack优化,尝试过几乎所有方法,一共26条,列举在此。 优化webpack,首先明确优化目标...
    seaasun阅读 2,189评论 0 4