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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jquery 插件学习(一)
Aug 06 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
ES6函数实现排它两种写法解析
May 13 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
一步一步学习PHP(3) php 函数
2010/02/15 PHP
destoon之一键登录设置
2014/06/21 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
python根据日期返回星期几的方法
2015/07/06 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
2015年清剿火患专项行动工作总结
2015/07/27 职场文书