浅谈webpack SplitChunksPlugin实用指南


Posted in Javascript onSeptember 17, 2018

提到前端打包工具,毫无疑问想先到的是webpack。但是前端发展地很快,时不时会有新东西出现,打包工具这边之前也出现parcel和rollup。各种工具的碰撞,相互汲取优点,促进技术的发展。

webpack4中支持了零配置的特性,同时对块打包也做了优化, CommonsChunkPlugin 已经被移除了,现在是使用 optimization.splitChunks 代替。

下面就开始介绍splitChunks的内容。

默认情况

首先webpack会根据下述条件自动进行代码块分割:

  • 新代码块可以被共享引用,或者这些模块都是来自node_modules文件夹里面
  • 新代码块大于30kb(min+gziped之前的体积)
  • 按需加载的代码块,并行请求最大数量应该小于或者等于5
  • 初始加载的代码块,并行请求最大数量应该小于或等于3

块打包默认情况下只会影响按需加载模块,因为对初始块也进行优化打包会影响HTML中的script标签数,增加请求数。

接下来看些例子来理解默认情况的打包。

模块全部是同步引入

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'

console.log(_.join(['a', 'b'], '~'))

ReactDOM.render(
 <div>SplitChunk</div>,
 document.getElementById('root')
)

浅谈webpack SplitChunksPlugin实用指南

默认情况只会影响按需加载模块,所以所有内容全部被打包到一起了。

有模块动态导入

这里首先使用符合ECMAScript 提案 的 import() 语法

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import(/* webpackChunkName: "async-jquery" */ 'jquery').then(component => {
 console.log(component)
})

console.log(_.join(['a', 'b'], '~'))

ReactDOM.render(
 <div>SplitChunk</div>,
 document.getElementById('root')
)

浅谈webpack SplitChunksPlugin实用指南

这里jquery使用动态导入,打包结果中可以看到jquery被单独打包了

react按需加载

同样的我们试要react按需加载,使用react-router提供的按需加载方案

AsyncModule模块按上面方案异步加载Dashboard

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'
import AsyncModule from './AsyncModule.jsx'
import _ from 'lodash'
import $ from 'jquery'

console.log(_.join(['a', 'b'], '~'))

ReactDOM.render(
 <div>
 <BrowserRouter>
  <Route path='/' component={AsyncModule} />
 </BrowserRouter>
 </div>,
 document.getElementById('root')
)

浅谈webpack SplitChunksPlugin实用指南

从打包结果可以看到按需加载的模块被打包到0.js去了。

讲完了webpack默认情况下对打包块的优化,接下来看splitChunks配置项。

配置项

相关配置项:

module.exports = {
 //...
 optimization: {
 splitChunks: {
  chunks: 'async', 
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~', 
  name: true,
  cacheGroups: {}
 }
 }
}
  • chunks: 表示哪些代码需要优化,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为async
  • minSize: 表示在压缩前的最小模块大小,默认为30000
  • minChunks: 表示被引用次数,默认为1
  • maxAsyncRequests: 按需加载时候最大的并行请求数,默认为5
  • maxInitialRequests: 一个入口最大的并行请求数,默认为3
  • automaticNameDelimiter: 命名连接符
  • name: 拆分出来块的名字,默认由块名和hash值自动生成
  • cacheGroups: 缓存组。缓存组的属性除上面所有属性外,还有test, priority, reuseExistingChunk
    • test: 用于控制哪些模块被这个缓存组匹配到
    • priority: 缓存组打包的先后优先级
    • reuseExistingChunk: 如果当前代码块包含的模块已经有了,就不在产生一个新的代码块

配置项基本就上面这些,我们重点来看下chunks和cacheGroups。

chunks

chunks的取值是有initial, async, all。默认情况下是async,在本文第一部分已经介绍了它的表现,所以现在来看下其它两个的表现。

initial , all 模式会将所有来自node_modules的模块分配到一个叫vendors的缓存组;所有重复引用至少两次的代码,会被分配到default的缓存组。

// indexA.js
import './Dashboard.jsx'

// indexB.js
import './Dashboard.jsx'

// Dashboard.jsx
import React from 'react'
// webpack.config.js
splitChunks: {
 chunks: 'initial'
}

浅谈webpack SplitChunksPlugin实用指南

打包表现正如上面所述,产生了两个代码块vendors, default。

可以通过配置optimization.splitChunks.cacheGroups.default: false禁用default缓存组。

// webpack.config.js
splitChunks: {
 chunks: 'initial',
 cacheGroups: {
 default: false
 }
}

浅谈webpack SplitChunksPlugin实用指南

至于all和initial的差别,可以看下这篇文章Webpack 4 — Mysterious SplitChunks Plugin (要科学上网)

里面有提到 initial 模式下会分开优化打包异步和非异步模块。而 all 会把异步和非异步同时进行优化打包。也就是说moduleA在indexA中异步引入,indexB中同步引入, initial 下moduleA会出现在两个打包块中,而 all 只会出现一个。

cacheGroups

使用cacheGroups可以自定义配置打包块。

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// indexB.js
import React from 'react'
import ReactDOM from 'react-dom'
import('lodash')
import $ from 'jquery'

// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
  commons: {
   name: 'commons',
   chunks: 'initial',
   minChunks: 2
  }
  }
 }
 }

浅谈webpack SplitChunksPlugin实用指南

根据开头介绍webapck分割条件,一些公共模块被打包进了commons,自定义打包块的优先级是0,所以现在公共模块会被打包进commons,而不是上述提到的默认打包块vendors(优先级为负)。

但是这边为什么lodash为什么没打包在一起呢?可以回顾下initial和all的区别。接下来实验下all的效果。

// indexA, indexB同上
// webpack.config.js
optimization: {
 splitChunks: {
  cacheGroups: {
   commons: {
    name: 'commons',
    chunks: 'all',
    minChunks: 2
   }
  }
 }
}

浅谈webpack SplitChunksPlugin实用指南

结果在预期中,lodash被打包在一起了。

提取第三方库

最后看下之前CommonsChunkPlugin常用的分离部分第三方库功能。这边你可以想一下怎么操作。

上面已经提到了设置 chunks: initial || all 都可以提取出第三方库。但是它是把所有第三库提取出来,所以我们在只提取react和react-dom的情况下,需要自定义一个cacheGroup。

// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'

// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js')
},
optimization: {
 splitChunks: {
  chunks: 'all',
  cacheGroups: {
   vendors: {
    test: /react/,
    name: 'vendors'
   }
  }
 }
}

浅谈webpack SplitChunksPlugin实用指南

我们去重写了vendors打包块,只打包匹配react的模块,所以达到了之前CommonsChunkPlugin的功能。

或者

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js'),
 vendor: ["react", "react-dom"]
},
optimization: {
 splitChunks: {
  cacheGroups: {
   vendor: {
    name: "vendor",
    chunks: "initial"
   }
  }
 }
}

浅谈webpack SplitChunksPlugin实用指南

optimization.runtimeChunk

最后提一下runtimeChunk,通过 optimization.runtimeChunk: true 选项,webpack会添加一个只包含运行时(runtime)额外代码块到每一个入口。(译注:这个需要看场景使用,会导致每个入口都加载多一份运行时代码)

总结

webpack4的splitChunks功能是比较强大的,不过推荐还是使用默认模式,或者提取一下第三方库。

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

Javascript 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
element tree树形组件回显数据问题解决
Aug 14 Javascript
vue的过滤器filter实例详解
Sep 17 #Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 #Javascript
React Router V4使用指南(精讲)
Sep 17 #Javascript
关于vue编译版本引入的问题的解决
Sep 17 #Javascript
理顺8个版本vue的区别(小结)
Sep 17 #Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 #Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
python访问类中docstring注释的实现方法
2015/05/04 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
详解rem 适配布局
2018/10/31 HTML / CSS
中医学专业自荐信范文
2014/04/01 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
就业推荐表院系意见
2015/06/05 职场文书
任命书格式范文
2015/09/22 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
css3新特性的应用示例分析
2022/03/16 HTML / CSS
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS