splitchunks使用方法
时间: 2023-12-07 14:37:38 浏览: 33
SplitChunks 是 Webpack 4 中用于提取公共代码的插件,它可以将多个入口 chunk 中的公共模块提取到一个单独的 chunk 中,以便浏览器可以从服务器上加载一次,而不是每个页面都加载一次。这样可以减少页面加载时间,提高性能。
以下是 SplitChunks 的使用方法:
1. 在 webpack.config.js 中配置 optimization.splitChunks:
```javascript
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
minSize: 1000,
minChunks: 2,
name: true,
cacheGroups: {
default: false,
vendors: false,
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor', chunks: 'all'
}
}
}
}
}
```
2. 配置项说明:
- chunks:表示哪些代码块需要被分割,可选值有 all、async 和 initial,默认为 async。
- minSize:表示分割前的最小模块大小,默认为 30000。
- minChunks:表示被多少模块共享时才进行分割,默认为 1。
- name:表示分割出来的代码块的名称,默认为 true,表示根据模块名和 cacheGroup 的 key 自动生成名称。
- cacheGroups:表示分割代码块的缓存组,可以继承和/或覆盖 splitChunks 中的配置项。
3. 示例代码:
```javascript
// 引入 SplitChunksPlugin
const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
// 配置 optimization.splitChunks
optimization: {
splitChunks: {
chunks: 'all',
minSize: 1000,
minChunks: 2,
name: true,
cacheGroups: {
default: false,
vendors: false,
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
// 使用 SplitChunksPlugin
plugins: [
new SplitChunksPlugin({
chunks: 'all',
minSize: 1000,
minChunks: 2,
name: true,
cacheGroups: {
default: false,
vendors: false,
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
})
]
```