nuxt中配置splitChunks
时间: 2024-05-12 16:20:20 浏览: 21
在 Nuxt.js 中,可以通过在 nuxt.config.js 文件中配置 splitChunks 来实现代码分割。
例如,以下是一个基本的 splitChunks 配置:
```
module.exports = {
build: {
optimization: {
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
cacheGroups: {
vendors: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
}
}
```
这个配置将会把所有公共依赖提取到一个 vendor.js 文件中,同时把所有至少被两个页面引用的公共代码提取到一个 common.js 文件中。其中,cacheGroups 中的 vendors 和 common 是两个缓存组,分别用于提取第三方库和公共代码。
需要注意的是,Nuxt.js 默认已经启用了代码分割,并且采用了一些默认的缓存组配置,因此在大多数情况下不需要手动配置 splitChunks。如果需要自定义配置,可以参考官方文档中的说明。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)