上期通过项目优化分享和实例解析:在淘宝优化了一个大型项目,分享一些干货(代码实例,图文结合),把 webpack 打包优化利器 SplitChunksPlugin 系统讲解了一遍。本期进一步深入,分析 SplitChunksPlugin 源码,搞清楚 webpack 是怎么和 SplitChunksPlugin 配合,完成打包优化的。恰好 webpack5 的 beta 版本正在迭代,所以我将直接...
结合前面提到的默认配置的源码,可以确定生产模式下,SplitChunksPlugin的默认配置如下: splitChunks: {chunks:"async",minSize:30000,minChunks:1,maxAsyncRequests:5,maxInitialRequests:3,automaticNameDelimiter:'~',name:true,cacheGroups: {vendors: {test:/[\\/]node_modules[\\/]/,priority: -10},default: {m...
// 因为selectedChunks和selectedChunksKey都分别是空数组和0n for (const cacheGroupSource of cacheGroups) { // 对于index,another-module经历一次遍历 // 对应cacheGroup的经过处理的default cache group const cacheGroup = this._getCacheGroup(cacheGroupSource); // 对于index和another-module,这里是一个chunk...
通过http2.0的多路复用,理论上可以通过一个TCP请求发送无数个请求。然后翻了下webpack代码仓库源码,发现了以下注释: http2.0支持情况: 所以在webpack的代码分割逻辑里,按需请求和初始请求都超过了之前浏览器对http1.0单个域名请求的限制。 参考文档: webpack中文文档 webpack英文文档 如何使用 splitChunks 精细控制代码分...
随着http2.0的普及,浏览器的并发请求的限制得到了很好的解决。通过http2.0的多路复用,理论上可以通过一个TCP请求发送无数个请求。然后翻了下webpack代码仓库源码,发现了以下注释: http2.0支持情况: 所以在webpack的代码分割逻辑里,按需请求和初始请求都超过了之前浏览器对http1.0单个域名请求的限制。
我们项目的webpack版本为4.44.2,因此选择这个版本的webpack进行源码解析,进一步了解SplitChunksPlugin如何进行打包的。 SplitChunksPlugin 引入缓存组(cacheGroups)对模块(module)进行分组,每个缓存组根据规则将匹配到的模块分配到代码块(chunk)中,每个缓存组的打包结果可以是单一 chunk,也可以是多个 chunk。webpack 的默认优...
使用Webpack时,你会得到一个或多个生成的输出文件,这些文件包含了我们源码的最终输出。而它们由代码块(chunks)组成。 入口(Entry) 入口定义了我们代码中应用是从哪里开始执行的,这也是Webpack开始打包的地方。你可以定义一个入口(常见于单页应用),或者多个入口(常见于多页应用)。
先对参数有一个大概的认识,虽然撸了很多遍官方的更新文档,但是还是去参看了一下新的wbepack源码,下面是各种参数及含义: chunks: 表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all; minSize: 表示在压缩前的最小模块大小,默认为0; ...
8.源码地址 demo 代码地址:https://github.com/SimpleCodeCX/simple-webpack-demos/tree/master/demo08-SplitChunksPlugin 仓库代码地址(及目录):https://github.com/SimpleCodeCX/simple-webpack-demos 参考文档: Webpack 4 Mysterious SplitChunks SplitChunksPlugin官方文档...
在浏览器运行 dist/index.html,打开控制台可以观察异步加载模块的效果。 (备注:runtime.xxxxxxxx.bundle.js模块包含了对异步加载模块的引用逻辑,此外,异步加载引用的相对路径受output -> publicPath配置的影响) 7.源码地址 demo 代码地址:github.com/SimpleCodeC… 仓库代码地址(及目录):github.com/SimpleCodeC…...