Webpack 理解 Chunk
期望
希望读过本篇文章,你在看Webpack配置的时候,能在脑中形成Chunk的生成过程。
Chunk
Chunk不同于entry、 output、module这样的概念,它们对应着Webpack配置对象中的一个字段,Chunk没有单独的配置字段,但是这个词出现在CommonsChunkPlugin(Webpack3以前)、optimization.splitChunks(Webpack4以后)这样的名称之中。
Chunk是我们理解Webpack,必须理解的一个概念。
Chunk在Webpack里指一个代码块,那具体是指什么样的代码块呢?
Chunk VS Module
Module
首先来说module,Webpack可以看做是模块打包机,我们编写的任何文件,对于Webpack来说,都是一个个模块。所以Webpack的配置文件,有一个module字段,module下有一个rules字段,rules下有就是处理模块的规则,配置哪类的模块,交由哪类loader来处理。
module: {rules: [{test: /\.css$/,use: [{loader: "style-loader"}, {loader: "css-loader"}]},...]},
复制代码
Chunk
Chunk是Webpack打包过程中,一堆module的集合。我们知道Webpack的打包是从一个入口文件开始,也可以说是入口模块,入口模块引用这其他模块,模块再引用模块。Webpack通过引用关系逐个打包模块,这些module就形成了一个Chunk。
如果我们有多个入口文件,可能会产出多条打包路径,一条路径就会形成一个Chunk。出了入口entry会产生Chunk,还有两种途径,下面会有介绍。
Chunk VS Bundle
通常我们会弄混这两个概念,以为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,如下图
注意到Chunk Names那列,只有main这么一个Chunk,再看Asset这一列,产生了两个bundle,还有一个.map文件。
这就是Chunk和Bundle的区别,Chunk是过程中的代码块,Bundle是结果的代码块。
查看Webpack源码,发现有一个Chunk.js,点进去看:
/*** A Chunk is a unit of encapsulation for Modules.* Chunks are "rendered" into bundles that get emitted when the build completes.*/
class Chunk {
}
复制代码
里面有一个Chunk类,这说明类Webpack在运行中,会生成Chunk对象,也能证明Chunk是过程中的代码块。
Chunk类上面的两句注释:一个Chunk是一些模块的封装单元。Chunk在构建完成就呈现为bundle。
产生Chunk的三种途径
- entry入口
- 异步加载模块
- 代码分割(code spliting)
entry产生Chunk
entry的配置有三种方式:
传递一个字符串
entry: './src/js/main.js',
复制代码
这种情况只会产生一个Chunk。(这里只说entry对Chunk的影响,不涉及代码分割)
传递数组
entry: ['./src/js/main.js','./src/js/other.js'],复制代码
这种情况也只会产生一个Chunk。Webpack会将数组里的源代码,最终都打包到一个Bundle里,原因就是只生成了一个Chunk.
传递对象
entry: {main: './src/js/main.js',other: './src/js/other.js'
},
output: {// path: __dirname + "/public",// filename:'bundle.js'// 以上2行会报错 path: __dirname + "/public",//打包后的文件存放的地方filename: "[name].js", //打包后输出文件的文件名}复制代码
对象中一个字段就会产生一个Chunk,所以在output中filename直接写死名称,会报错。因为上面的配置,产生了两个Chunk,最终会生成两个Bundle,一个名称肯定不够用了。需要用[name]变量来利用entry下的字段名称,作为生成Bundle们的名称。
这里面entry的key,也被用来当作它对应的Chunk的名称,上面传递一个字符串和传递数组两种方式,没有key,也会默认给生成的Chunk一个main的名称。
异步产生Chunk
除了入口文件会影响Chunk,异步加载的模块,也需要生成Chunk。
{entry: {"index": "pages/index.jsx"},output: {filename: "[name].min.js",chunkFilename: "[name].min.js"}
}
const myModel = r => require.ensure([], () => r(require('./myVue.vue')), 'myModel')
复制代码
这个时候chunkFilename字段就派上用场了,为异步加载的Chunk命名。
代码分割产生Chunk
我们来分析一下,下面代码会产生几个Chunk,其中main.js文件和two.js文件,都引用了同一个greeter.js文件。main.js中使用了react。
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}},}}
}复制代码
答案是5个,两个入口分别产生一个, runtimeChunk: "single"会将Webpack在浏览器端运行时需要的代码单独抽离到一个文件,commons下的配置会产生一个Chunk,vendor下的配置会产生一个Chunk。如下图。
结束语
今天的研究就到这里。
能够在看Webpack的配置的时候,分辨出这样的配置能生成几个Chunk,Webpack就算是入门了,后面理解它的其他概念,会容易很多。
Webpack 理解 Chunk相关推荐
- Webpack 的 Chunk,想怎么分就怎么分
想必大家都用过 webpack,也或多或少了解它的原理,但是不知道大家有没有写过 Webpack 的插件呢? 今天我们就一起来写一个划分 Chunk 的 webpack 插件吧,写完后你会发现想怎么分 ...
- webpack 打包chunk
chunk的含义以及出现的情况 webpack特定术语在内部用于管理捆绑过程,输出束(bundle)由块组成. 是webpack 根据功能拆分出来的代码片段,包含三种情况 官方: 1.入口起点:使用e ...
- webpack中的chunk
Webpack 理解 Chunk - 掘金 Webpack 理解 Chunk 期望 希望读过本篇文章,你在看Webpack配置的时候,能在脑中形成Chunk的生成过程. Chunk Chunk不同于e ...
- 小程序工程化实践(上篇)-- 手把手教你撸一个小程序 webpack 插件,一个例子带你熟悉 webpack 工作流程...
本文基于 webpack 4 和 babel 7,Mac OS,VS Code 小程序开发现状: 小程序开发者工具不好用,官方对 npm 的支持有限,缺少对 webpack, babel 等前端常用工 ...
- 「前端」看懂前端脚手架你需要这篇webpack
本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅. 分割webpack配置文件的多种方法 (一) 将你的配置信息写到多个分散的文件中去,然后在执行webpack的时候利用--config ...
- [转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
- 五分钟学会前端打包工具webpack
可以做的事情 代码转换.文件优化.代码分割.模块合并.自动刷新.代码校验.自动发布 最终目的 webpack的基本配置 webpack的高级配置 webpack的优化策略 ast抽象语法树 webpa ...
- 【第二届青训营-寒假前端场】- 「构建Webpack知识体系」笔记
本节课重点内容 什么是Webpack Webpack打包核心流程 示例 步骤 关键配置项(如何使用?) 使用Webpack处理CSS/less等 思考题 使用Webpack接入Babel 思考题 使用 ...
- webpack----认识webpack
目录 什么是webpack 核心概念 目录结构 案例练习 打包css/img等资源 打包html 打包图片 打包其他资源 什么是webpack 一种静态模块打包器,将js/css/images等静态资 ...
- vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...
最新文章
- 宝塔控制面板创建ftp后链接不上的解决方法
- 【Linux开发】linux设备驱动归纳总结(一):内核的相关基础概念
- SSM实现导出报表为Excel
- EVA 4400存储数据恢复报告
- 我的第一个python web开发框架(32)——定制ORM(八)
- 【牛客 - 315C】排列(思维,贪心,同优则立证明法)
- 算法的优缺点_一文总结机器学习各算法优缺点
- 快速排序算法c语言lomuto,快速排序(N.Lomuto版)
- Apple越狱后超级实用的Cydia常用源推荐
- 中标麒麟使用centos源_中标麒麟操作系统使用笔记
- python打错了怎么删掉_python写错了怎么删除
- ubuntu系统镜像下载源
- 小程序源码:全新动态视频壁纸下载支持多种分类短视频另外也有静态壁纸
- 浮点数二分模板---yxc
- TM1638芯片 LED数码管驱动器 详细介绍
- d盘莫名其妙被占空间 win10_为何联想电脑的win10系统d盘突然显示储存空间不足...
- 【MATLAB-app】系列教程(含视频)第2课_实例:使用appdesigner 制作简单的计算器
- 智能照明-----开关第二讲----随意贴
- Python 播放音频与录音 !
- Linux的软链接与硬链接