伏龙阁资源网

一步一步的了解webpack4的splitChunk插件(小结)
站长资源 2024/11/27 佚名
2 0

初衷

webpack4出了两个月，发现大家包括我对splitChunk的使用都还是在摸索阶段。我也看了挺多别人的配置demo，都觉得不太满意或者没得到太好的解惑，issue 下面的问题也没什么人回复，只能自己操作了，顺便记录下来，如果大家有更好的，欢迎评论区留下地址。

常用参数

  • minSize(默认是30000)：形成一个新代码块最小的体积
  • minChunks（默认是1）：在分割之前，这个代码块最小应该被引用的次数（译注：保证代码块复用性，默认配置的策略是不需要多次引用也可以被分割）
  • maxInitialRequests（默认是3）：一个入口最大的并行请求数
  • maxAsyncRequests（默认是5）：按需加载时候最大的并行请求数。
  • chunks (默认是async) ：initial、async和all
  • test： 用于控制哪些模块被这个缓存组匹配到。原封不动传递出去的话，它默认会选择所有的模块。可以传递的值类型：RegExp、String和Function
  • name(打包的chunks的名字)：字符串或者函数(函数可以根据条件自定义名字)
  • priority ：缓存组打包的先后优先级。

如果你对这些配置还是不熟悉的话，一拉到底，看看文档

正文

先总览一下所有配置，后续会根据demo跑一遍常见的需求。

optimization: {
 splitChunks: {
  chunks: "async", // 必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)
  minSize: 30000, // 最小尺寸，30000
  minChunks: 1, // 最小 chunk ，默认1
  maxAsyncRequests: 5, // 最大异步请求数， 默认5
  maxInitialRequests : 3, // 最大初始化请求书，默认3
  automaticNameDelimiter: '~',// 打包分隔符
  name: function(){}, // 打包后的名称，此选项可接收 function
  cacheGroups:{ // 这里开始设置缓存的 chunks
   priority: 0, // 缓存组优先级
   vendor: { // key 为entry中定义的 入口名称
    chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是async) 
    test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
    name: "vendor", // 要缓存的 分隔出来的 chunk 名称 
    minSize: 30000,
    minChunks: 1,
    enforce: true,
    maxAsyncRequests: 5, // 最大异步请求数， 默认1
    maxInitialRequests : 3, // 最大初始化请求书，默认1
    reuseExistingChunk: true // 可设置是否重用该chunk
   }
  }
 }
 },

接下来看看第一个例子

entry: {
		pageA: "./pageA", // 引用utility1.js utility2.js
		pageB: "./pageB", // 引用utility2.js utility3.js
		pageC: "./pageC" // 引用utility2.js utility3.js
	},
	
	optimization: {
		splitChunks: {
			cacheGroups: {
				commons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create commons chunks
				}
			}
		}
	},

结果如图，一切都很正常 commons~pageA~pageB~pageC.js 文件就是utility2.js commons~pageB~pageC.js，根据上述代码，这里的utility2被引用了三次，首先就被抽离了commons~pageA~pageB~pageC.js，然后utility3被引用了两次就放到了commons~pageB~pageC.js，最后只剩下被引用一次的utility1.js,就直接放到了pageA.js里面，如果这里的utility1.js的也是两次，他还是会新建一个chunk放进去，而不是合并到commons~pageB~pageC.js,除非同入口引用才会合并。

mpageA.js pageB.js pageC.js

一步一步的了解webpack4的splitChunk插件(小结)

这里有个地方是需要优化一下的，就是pageA.js pageB.js pageC.js的代码不多，但是打出来的包很大，肯定是一些webpack的运行文件，直接加上runtimeChunk 

 runtimeChunk: "single"
 // 等价于
 runtimeChunk: {
  name: "manifest"
 }

现在就好了

一步一步的了解webpack4的splitChunk插件(小结)

引用第三方模块 pageA引用vue.js pageB引用react react-dom

vendor: {
		test: /node_modules/,
		chunks: "initial",
		name: "vendor",
		priority: 10,
		enforce: true
	}

但是，这样子的话，会把pageA pageB pageC所有的库都打包到一起vendor.js

一步一步的了解webpack4的splitChunk插件(小结)

假如我想拆分这个vendor.js为pageA-vendor.js pageB-vendor.js怎么办，我试了很久，试出一个最简单的办法,去掉手动的vendor，让插件自动处理。

splitChunks: {
  chunks: "all",
  cacheGroups: {
				commons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create commons chunks
				}
			}
		},

一步一步的了解webpack4的splitChunk插件(小结)

后来，我把webpack mode改成production后，发现不管用了，同样的配置，在生产模式下，打包出来的东西有点匪夷所思，vendor-pageB.js被合并到了pageB.js里面了。

一步一步的了解webpack4的splitChunk插件(小结)

后来我折腾了好久也分析不出来为什么，自己折腾出来一种方式，还是老子手动来吧，自动化一边去

 commons: {
   chunks: "initial",
   minChunks: 2,
   maxInitialRequests: 5, // The default limit is too small to showcase the effect
   minSize: 0 // This is example is too small to create commons chunks
	},
  'vendor-pageA': {
   test: /vue/, // 直接使用 test 来做路径匹配
   chunks: "initial",
   name: "vendor-pageA",
   enforce: true,
  },
  'vendor-pageB': {
   test: /react/, // 直接使用 test 来做路径匹配
   chunks: "initial",
   name: "vendor-pageB",
   enforce: true,
  },

成功打包出来了自己想要的东西。

一步一步的了解webpack4的splitChunk插件(小结)

动态引入

动态引入大家应该都不陌生，就是大家所说的懒加载,直接在pageA和pageB页面里动态引入common-async.js，在这里我先说说，splitChunk应该是可以自动化处理类似commonChunk里的async，child等情况的。

import(/* webpackChunkName: "common-async.js" */"./common-async").then(common => {
 console.log(common);
})

还不错，成功打包出来了

一步一步的了解webpack4的splitChunk插件(小结)

这时候再试试，在这个common-async.js里面在引入共同的代码f.js，看看会不会重复打包

一步一步的了解webpack4的splitChunk插件(小结)

f.js成功的被抽离出来了，其他文件也没有被重复打包，挺好的。

一步一步的了解webpack4的splitChunk插件(小结)

注意的地方

  • cacheGroups 会继承和覆盖splitChunks的配置项，但是test、priorty和reuseExistingChunk只能用于配置缓存组。。
  • cacheGroups 里的每一项最好都要加上chunks参数，不然可能打包不出来你想要的东西。
  • minSize 默认是30KB（注意这个体积是压缩之前的）在小于30kb的情况下一定要设置一个值，否则也可能打包不出来你想要的东西，而且这东西要加在cacheGroups里面。
  • priority 在某些情况下，还是挺有用的，可以设置打包chunks的优先级。

上面的例子里面配置了一个commons，这里的name可以自己设置，也可以不设置，我是没设置的，你可以试试设置了是什么样子的，然后你就会明白这个name其实在某些情况下还是不设置的比较好。

 commons: {
   	chunks: "initial",
		minChunks: 2,
		maxInitialRequests: 5, // The default limit is too small to showcase the effect
		minSize: 0 ,
		name: "commons"
  },

源码

代码分割

代码懒加载

参考文章

webpack文档
官方demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接