webpack4之SplitChunksPlugin使用指南


Posted in Javascript onJune 12, 2018

写在前面

前面写了一篇有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题,有兴许可以看一下。

0. 参数介绍

先对参数有一个大概的认识,虽然撸了很多遍官方的更新文档,但是还是去参看了一下新的wbepack源码,下面是各种参数及含义:

  1. chunks: 表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;
  2. minSize: 表示在压缩前的最小模块大小,默认为0;
  3. minChunks: 表示被引用次数,默认为1;
  4. maxAsyncRequests: 最大的按需(异步)加载次数,默认为1;
  5. maxInitialRequests: 最大的初始化加载次数,默认为1;
  6. name: 拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;
  7. cacheGroups: 缓存组。

对于缓存组是一个对象,处了可以有上面的chunksminSizeminChunksmaxAsyncRequestsmaxInitialRequestsname外,还有其他的一些参数:

如果不在缓存组中重新赋值,缓存组默认继承上面的选项,但是还有一些参数是必须在缓存组进行配置的。

  1. priority: 表示缓存的优先级;
  2. test: 缓存组的规则,表示符合条件的的放入当前缓存组,值可以是functionbooleanstringRegExp,默认为空;
  3. reuseExistingChunk: 表示可以使用已经存在的块,即如果满足条件的块已经存在就使用已有的,不再创建一个新的块。

1. 基本使用

首先,在新版本的webpack会默认对代码进行拆分,拆分的规则是:

  1. 模块被重复引用或者来自node_modules中的模块
  2. 在压缩前最小为30kb
  3. 在按需加载时,请求数量小于等于5
  4. 在初始化加载时,请求数量小于等于3

小于30kb的模块不值得再单独发送一次请求,在很小的模块的前提下,相比与多次打包,减少请求次数成本要低。

当然也可以不使用默认的配置,比如这样:

new webpack.optimize.SplitChunksPlugin({
  chunks: "all",
  minSize: 20000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true
)}

上面的代码就表示,在所有代码中,引用模块大小最小为20kb,引用次数最少为1次,按需加载最大请求次数为5,初始化加载最大请求次数为3的所有模块就行拆分到一个单独的代码块中,name表示代码的名字,设置为true则表示根据模块和缓存组秘钥自动生成。

2. 使用缓存组(Cache Groups)

如果想继续细分代码,可以使用缓存组(Cache Groups)。同样的,缓存组也有默认的配置;缓存组默认将node_modules中的模块拆分带一个叫做vendors的代码块中,将最少重复引用两次的模块放入default中。

这是一段官方里面的代码:

splitChunks: {
  chunks: "async",
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true,
  cacheGroups: {
    default: {
      minChunks: 2,
      priority: -20
      reuseExistingChunk: true,
    },
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    }
  }
}

上面是缓存组的默认配置,可以通过default:false禁用默认的缓存组,然后就可以自定义缓存组,将初始化加载时被重复引用的模块进行拆分,就像这样:

cacheGroups: {
  commons: {
    name: "commons",
    chunks: "initial",
    minChunks: 2
  }
}

之后就随心所欲,可以根据具体的需求,创建多个缓存组:

cacheGroups: {
  a: {
    // ...
  },
  b: {
    // ...
  }
  // ...
}

写在后面

webpack更新已经过了很多天了,最近算是把更新的基本都过了一遍,在此记录以便日后查看,理解有问题的地方还请不吝赐教。

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

Javascript 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
jQuery实现评论模块
Aug 19 jQuery
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 #Javascript
webpack分离css单独打包的方法
Jun 12 #Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 #Javascript
webpack项目轻松混用css module的方法
Jun 12 #Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 #Javascript
You might like
php 解压rar文件及zip文件的方法
2014/05/05 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
自动更新作用
2006/10/08 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
python中随机函数random用法实例
2015/04/30 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
运动会广播稿200字
2014/10/18 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
MySQL系列之十一 日志记录
2021/07/02 MySQL
DSP接收机前端设想
2022/04/05 无线电