webpack4.x版本splitChunksPlugin的配置项详解与实际应用场景
个人维护的 webpack@latest 多页脚手架2.X已经发布,喜欢请给星,详见: https://github.com/pomelott/webpack-multi-page-cli
在工程化地使用webpack时,公共代码抽离是不可或缺的,4.x版本之后,commonsChunkPlugin已经被去掉,splitChunksPlugins登上舞台,并且优化了很多配置选项,具体可见官方文档,这里不做过多说明。
在使用splitChunksPlugins之前,首先要知道splitChunksPlugins是webpack主模块中的一个细分模块,无需npm引入。功能上,splitChunksPlugins只能用于如何抽离公用的代码,也就是抽离公用代码的规则,要记住,除了这个功能之外,splitChunksPlugins再无其他功能(明白这点很重要,至少我自己在这点上被坑到过)。
首先先说每个配置项的作用:
*在此说明下, 下文中说到的块即chunks,也就是js文件
1. minSize
分离前的最小块文件大小,单位为字节
2. minChunks
分离前,该块被引入的次数
3.maxInitialRequests
一个入口文件可以并行加载的最大文件数量
4.maxAsyncRequests
内层文件(第二层)按需加载时最大的并行加载数量
5.name
用以控制分离后代码块的命名,当存在匹配的缓存组(后面会说到)时,命名使用缓存组中的name值,若不存在则为 [来源]~[入口的key值].js 的格式
6.automaticNameDelimiter
修改上文中的 “~” , 若改为: “-” 则分离后的js默认命名规则为 [来源]-[入口的key值].js
7.test
用于规定缓存组匹配的文件位置,test: /node_modules/ 即为匹配相应文件夹下的模块
8.cacheGroups
名字叫做缓存组,其实就是存放分离代码块的规则的对象,叫做cacheGroup的原因是webpack会将规则放置在cache流中,为对应的块文件匹配对应的流,从而生成分离后的块。
cacheGroup中priority 为分离规则的优先级,优先级越高,则优先匹配。
9.chunks
匹配的块的类型:initial(初始块),async(按需加载的异步块),all(所有块)
10.priority
这个是最重要的,即便是所有配置项都写好了,优先级不够,或者优先级设置不正确,也得不到相应的结果。当需要优先匹配缓存组的规则时,priority需要设置为正数,当需要优先匹配默认设置时,缓存组需设置为负数,0为两者的分界点。
splitChunks的常用配置:
optimization: {
splitChunks: {
cacheGroups:{
// 比如你要单独把jq之类的官方库文件打包到一起,就可以使用这个缓存组,如想具体到库文件(jq)为例,就可把test写到具体目录下
vendor: {
test: /node_modules/,
name: "vendor",
priority: 10,
enforce: true
},
// 这里定义的是在分离前被引用过两次的文件,将其一同打包到common.js中,最小为30K
common: {
name: "common",
minChunks: 2,
minSize: 30000
} },
chunks:"all",
minSize: 40000
}
}
4.x属于比较新的版本,官方文档有些细节说的不是很清楚,只能自己摸索。如有疑问,欢迎指教。
webpack4.x版本splitChunksPlugin的配置项详解与实际应用场景的更多相关文章
- Storm配置项详解【转】
Storm配置项详解 ——阿里数据平台技术博客:storm配置项详解 什么是Storm? Storm是twitter开源的一套实时数据处理框架,基于该框架你可以通过简单的编程来实现对数据流的实时处理变 ...
- 转:Windows下的PHP开发环境搭建——PHP线程安全与非线程安全、Apache版本选择,及详解五种运行模式。
原文来自于:http://www.ituring.com.cn/article/128439 Windows下的PHP开发环境搭建——PHP线程安全与非线程安全.Apache版本选择,及详解五种运行模 ...
- SpringCloud Eureka参数配置项详解
SpringCloud Eureka参数配置项详解(转) Eureka涉及到的参数配置项数量众多,它的很多功能都是通过参数配置来实现的,了解这些参数的含义有助于我们更好的应用Eureka的各种功能,下 ...
- Python - poetry(3)配置项详解
config 命令 poetry 通过 config 命令进行配置 也可以直接在 config.toml 文件中进行配置,该文件将在首次运行该命令时自动创建 文件目录 macOS:~/Library/ ...
- 【转】web.xml配置项详解
史上最全web.xml配置文件元素详解 一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <d ...
- SpringBoot application.properties 配置项详解
参考: http://blog.csdn.net/lpfsuperman/article/details/78287265### # spring boot application.propertie ...
- cloudermanger安装时需要安装或彻底正确卸载再安装orcal-java7-installer、oracle-java7-set-default(ubuntu14.04版本)(图文详解)
不多说,直接上干货! 安装orcal-java7-installer和oracle-java7-set-default 安装JDK1.7 (所有节点)CDH要求至少是Oracle JDK7,Ubunt ...
- webpack4+koa2+vue 实现服务器端渲染(详解)
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
- 机器学习 | 详解GBDT在分类场景中的应用原理与公式推导
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第31篇文章,我们一起继续来聊聊GBDT模型. 在上一篇文章当中,我们学习了GBDT这个模型在回归问题当中的原理.GBD ...
随机推荐
- Linux Shell 脚本攻略学习--四
linux中(chattr)创建不可修改文件的方法 在常见的linux扩展文件系统中(如ext2.ext3.ext4等),可以将文件设置为不可修改(immutable).某些文件属性可帮助我们将文件设 ...
- memcached /usr/local/memcached/bin/memcached: error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory
启动memcached的时候发现找不到libevent的库,这是memcache的默认查找路径不包含libevent的安装路径,所以要告诉memcached去哪里查找libevent. 操作命令如下: ...
- APPCORE Routine APIs
Introduction to APPCORE Routine APIs This chapter provides you with specifications for calling many ...
- libevent之event
就如libevent官网上所写的“libevent - an event notification library”,libevent就是一个基于事件通知机制的库,可以看出event是整个库的核心.e ...
- Linux 用户打开进程数的调整
Linux 用户打开进程数的调整 参考文章: 关于RHEL6中ulimit的nproc限制(http://www.cnblogs.com/kumulinux/archive/2012/12/16/28 ...
- Xcode模拟器中无法播放音频文件的原因分析
在本猫的Mac Mini上开发iOS app,发现当执行到播放音频的代码时,发生错误,log如下: 2015-10-05 07:22:17.122 LearnSpriteBuilder[10321:5 ...
- Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解
Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...
- iOS课程表
最近在做课程表,刚开始的时候完全不知道那个周课表的网格是怎么实现的有木有,各种查资料,寻思路,只找到一个安卓版的.没事,咱要的是思路而已.可能思路不是最优的,但还是总结一下,也希望能给其他人一点思路. ...
- linux下如何查询未知库所依赖的包
经常会遇到linux下安装软件时提示少文件,如何知道所缺少的文件属于哪个包?用什么命令查看? 例如:/lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录 ...
- obj-c编程11:内存管理和ARC(自动引用计数)
乖乖隆地洞,这篇文章内容可是不得了,内存管理哦!首先,这个要是搞不明白,你就等着进程莫名其妙的挂死,或是疯狂申请内存却不释放,结果被OS杀死,不管是"自杀"还是"他杀&q ...