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


Posted in Javascript onSeptember 17, 2018

初衷

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
由document.body和document.documentElement想到的
Apr 13 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
jquery 使用简明教程
Mar 05 Javascript
详解JavaScript函数对象
Nov 15 Javascript
js面向对象的写法
Feb 19 Javascript
一些实用性较高的js方法
Apr 19 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
React Router V4使用指南(精讲)
Sep 17 #Javascript
关于vue编译版本引入的问题的解决
Sep 17 #Javascript
理顺8个版本vue的区别(小结)
Sep 17 #Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 #Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 #Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 #Javascript
You might like
yii通过小物件生成view的方法
2016/10/08 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python微信公众号之关键词自动回复
2018/06/15 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
市场营销专业求职信
2014/06/17 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书