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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
yii操作cookie实例简介
2014/07/09 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
jquery 学习笔记一
2010/04/07 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
对javascript继承的理解
2016/10/11 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
vue获取form表单的值示例
2019/10/29 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python标准库sched模块使用指南
2017/07/06 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python多层装饰器用法实例分析
2018/02/09 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 项目目录结构设置
2020/02/14 Python
浅析python实现动态规划背包问题
2020/12/31 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
初中地理教学反思
2014/01/11 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
工会趣味活动方案
2014/08/18 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
Python实现天气查询软件
2021/06/07 Python