浅谈webpack SplitChunksPlugin实用指南

提到前端打包工具，毫无疑问想先到的是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')
)

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

有模块动态导入

这里首先使用符合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')
)

这里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')
)

从打包结果可以看到按需加载的模块被打包到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'
}

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

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

// webpack.config.js
splitchunks: {
 chunks: 'initial',
 cachegroups: {
 default: false
 }
}

至于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
  }
  }
 }
 }

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

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

// indexa, indexb同上
// webpack.config.js
optimization: {
 splitchunks: {
  cachegroups: {
   commons: {
    name: 'commons',
    chunks: 'all',
    minchunks: 2
   }
  }
 }
}

结果在预期中，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'
   }
  }
 }
}

我们去重写了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"
   }
  }
 }
}

optimization.runtimechunk

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

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。