不会还有人不知道module、bundle和chunk的区别吧？

module

非连续的功能块——提供了更小的表面积而不是整个程序。书写良好的modules提供了可靠的抽象及封装边界，组成了统一的设计和清晰的目的；模块解析（ModuleResolution）一个模块可以作为另一个模块的依赖模块，resolver是一个库（libary）用于帮助找不到模块的绝对路径，模块将在resolve.modules中指定的所有目录内搜索。
换句话说就是将一个个js、css拆分成一个个小模块。对于 webpack 来说，项目源码中所有资源（包括 JS、CSS、Image、Font 等等）都属于 module 模块。可以配置指定的 Loader 去处理这些文件。

如图所示：从main.js为入口文件，根据模块的依赖，一个一个的往上找，最后生成bundle。

下面是webpack与模块化之间的关系：

chunk

该webpack专业术语用于webpack内部管理bundling的过程中。bundles由许多的chunks组成——这些chunk有不同的类型（比如entry或child）。通常，chunks直接与bundles相对应。然而，有一些配置可以使其不是一对一的关系；

产生chunk的三种途径：

1：entry入口
2：异步加载模块
3：代码分割（code spliting）

1.entry产生Chunk

传递一个字符串

entry: './src/js/main.js',

传递数组

entry: ['./src/js/main.js','./src/js/other.js'],

传递对象

entry: {main: './src/js/main.js',other: './src/js/other.js'
}

2.异步产生Chunk

{entry: {"index": "pages/index.jsx"},output: {filename: "[name].min.js",chunkFilename: "[name].min.js" // 为异步加载的chunk命名}
}
const myModel = r => require.ensure([], () => r(require('./myVue.vue')), 'myModel')

3.代码分割产生Chunk

module.exports = {entry: {main: __dirname + "/app/main.js",other: __dirname + "/app/two.js",},output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "[name].js", //打包后输出文件的文件名chunkFilename: '[name].js',},optimization: {runtimeChunk: "single",splitChunks: {cacheGroups: {commons: {chunks: "initial",minChunks: 2,maxInitialRequests: 5, // The default limit is too small to showcase the effectminSize: 0 // This is example is too small to create commons chunks},vendor: {test: /node_modules/,chunks: "initial",name: "vendor",priority: 10,enforce: true}},}}
}

我们一起看看上面的代码会产生多少个chunk?
答案是5个，两个入口分别产生一个， runtimeChunk: "single"会将Webpack在浏览器端运行时需要的代码单独抽离到一个文件，commons下的配置会产生一个Chunk，vendor下的配置会产生一个Chunk。如下图。

bundle

由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。
通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个Chunk会生产一个Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool配置成’source-map’。然后只有一个入口文件，也不配置代码分割：

 // webpack配置entry: {main: __dirname + "/app/main.js",},output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "[name].js", //打包后输出文件的文件名},devtool: 'source-map',

这样的配置，会产生一个Chunk，但是会产生两个bundle，如下图

总流程图：

module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。

不会还有人不知道module、bundle和chunk的区别吧？相关推荐

bundle、chunk、module的区别
概念 bundle bundle由许多不同的模块生成,包含已经经过加载和编译过程的源文件的最终版本 chunk chunk主要是在内部用于管理捆绑过程.输出是由bundle由chunk组成,其中有几种 ...
android r类作用,Android 主项目和 Module 中 R 类的区别
Android 主项目和 Module 中 R 类的区别我们知道 Android 项目中会通过自动生成一个 R.java 类的方式来保存项目中所有资源文件的标识在主项目中生成的 R.java 中的资 ...
module是什么类型_nodejs中module.exports和exports的区别
本文同步发表在我的个人博客中: 沧沧凉凉www.cclliang.com 最近在学习nodejs,这篇文章就权当是一篇笔记,如果有什么地方有误,望指出. 先说说它们之间的区别: exports只能使 ...
module.exports和exports得区别
对module.exports和exports的一些理解可能是有史以来最简单通俗易懂的有关Module.exports和exports区别的文章了. exports = module.exports ...
nodejs中module.exports和exports的区别
最近在学习nodejs,这篇文章就权当是一篇笔记,如果有什么地方有误,望指出. 首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Com ...
module.export和exports两者区别及使用方法
参考链接:简书博客.简书博客.CommonJS规范功能介绍 module.exports Node应用由模块组成,采用CommonJS模块规范.根据这个规范,每个文件就是一个模块,有自己的作用域.在 ...
一句话说清楚NodeJS中module.exports和exports的区别
关于这个问题NodeJS的官方文档中有一句很精辟的解释: What's the difference between module.exports and exports? The first exp ...
Node中Exports与module.export的使用与区别
最近在看<node开发实战详解>时有写疑问,所以自己就整理了一些资料.下面是node4.*的官方api文档(http://nodejs.cn/doc/node_4/modules.html ...
Android中Bundle和Intent的区别
Bundle的作用,以及和Intent的区别: 一.Bundle: A mapping from String values to various Parcelable types 键值对的集合类继 ...
(node中)module.exports 和exports的区别
(node中使用)module.exports 和exports的区别是什么? 用一句话来说明就是,require只会去引用module.exports这个对象的导出,不会引用exports对象的,而 ...

不会还有人不知道module、bundle和chunk的区别吧？

产生chunk的三种途径：

不会还有人不知道module、bundle和chunk的区别吧？相关推荐

最新文章

热门文章