nuxt中配置splitChunks
时间: 2024-05-02 11:18:05 浏览: 17
在 Nuxt 中,可以通过配置 `build` 属性中的 `optimization` 对象来配置 webpack 的 `splitChunks` 模块分离策略。例如:
```js
// nuxt.config.js
export default {
// ...
build: {
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '-',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
priority: -10,
chunks: 'initial'
},
common: {
name: 'common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
}
}
```
其中,`chunks: 'all'` 表示对所有的代码块进行分离,`automaticNameDelimiter: '-'` 表示分离后的名称中使用 `-` 连接符连接,`cacheGroups` 是具体的分离策略配置。上述示例中,我们定义了两个分离策略:
- `vendor`:将所有来自 `node_modules` 目录的模块分离到 `vendor.js` 文件中;
- `common`:将被至少两个页面引用的模块分离到 `common.js` 文件中。
更多的配置项可以参考 webpack 的 [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) 文档。