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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
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版)
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php发送post请求的三种方法
2014/02/11 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
css图片自适应大小
2007/11/28 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Vue组件开发初探
2017/02/14 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python守护线程用法实例
2017/06/23 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python count函数使用方法实例解析
2020/03/23 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
高三自我鉴定范文
2013/10/19 职场文书
运动会跳远广播稿
2014/02/04 职场文书
小学少先队活动方案
2014/02/18 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
交通安全主题班会
2015/08/12 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
理解python中装饰器的作用
2021/07/21 Python