<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',
