Webpack中SplitChunksPlugin 配置参数详解


Posted in Javascript onMarch 24, 2020

代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现。

在 webpack 中是使用 SplitChunksPlugin 来实现的,由于 SplitChunksPlugin 配置参数众多,接下来就来梳理一下这些配置参数。

官网上的默认配置参数如下:

module.exports = {
 //...
 optimization: {
  splitChunks: {
   chunks: 'async', // 代码分割时对异步代码生效,all:所有代码有效,inital:同步代码有效
   minSize: 30000, // 代码分割最小的模块大小,引入的模块大于 30000B 才做代码分割
   maxSize: 0, // 代码分割最大的模块大小,大于这个值要进行代码分割,一般使用默认值
   minChunks: 1, // 引入的次数大于等于1时才进行代码分割
   maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量
   maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件
   automaticNameDelimiter: '~', // 文件生成时的连接符
   automaticNameMaxLength: 30, // 自动生成的文件名的最大长度
   cacheGroups: {
    vendors: {
     test: /[\\/]node_modules[\\/]/, // 位于node_modules中的模块做代码分割
     priority: -10 // 根据优先级决定打包到哪个组里,例如一个 node_modules 中的模块进行代码
    }, // 分割,,既满足 vendors,又满足 default,那么根据优先级会打包到 vendors 组中。
    default: { // 没有 test 表明所有的模块都能进入 default 组,但是注意它的优先级较低。
     priority: -20, // 根据优先级决定打包到哪个组里,打包到优先级高的组里。
     reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
    }
   }
  }
 }
};

补充几点:

在分组中可以人为地规定打包后文件的名字,在 vendor 分组中添加 filename = "vendor.js" 之后,在 vendor 分组中打包后文件的名字都是 vendor.js 。

reuseExistingChunk  实例讲解:

// a.js
import b from './b';

// index.js
import a from './a';
import b from './b';

在上述代码中,index.js 在执行 import a from './a' 时引入 a 模块,由于 a 模块中使用了 b 模块,所以同时也引入了 b 模块。再执行 import b from './b' 时,由于 b 模块已经被打包过了,所以就会忽略掉这个 b 模块,这就是 reuseExistingChunk: true 的作用。

如果想让两个模块打包到一个文件里应该如何实现?

cacheGroup 就可以实现这个需求,假设有两个模块 module1 和 module2,且都满足 vendor 这个组,那么在进行代码分割时,会先将 module1 放到 CacheGroup 中,然后再将 module2 放到 cacheGroup 中,最后再将两者一起放到 vender 组里生成 vender.js 文件。

到此这篇关于Webpack中SplitChunksPlugin 配置参数详解的文章就介绍到这了,更多相关Webpack SplitChunksPlugin 配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
详解vuejs之v-for列表渲染
Jun 22 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
js实现小星星游戏
Mar 23 #Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
PHP中的串行化变量和序列化对象
2006/09/05 PHP
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php学习笔记之 函数声明
2011/06/09 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
JavaScript中的细节分析
2012/06/30 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JS实现简单随机3D骰子
2019/10/24 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python用700行代码实现http客户端
2021/01/14 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
高中家长寄语
2014/04/02 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
网站推广策划方案
2014/06/04 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书