webpack minchunks
时间: 2023-10-19 08:29:37 浏览: 47
`minChunks` 是 Webpack 中用于配置模块的公共依赖被提取到共享模块的最小引用次数的参数。当设置了 `minChunks` 参数后,Webpack 会自动识别哪些模块被多次引用,并将其提取到公共模块中。这样可以减少代码冗余,提高应用的性能。
例如,如果设置 `minChunks: 2`,则只有被两个或以上的模块引用的模块才会被提取到公共模块中。如果设置为 `Infinity`,则只有被每个模块都引用的模块才会被提取到公共模块中。
相关问题
webpack分包配置
webpack分包可以通过以下两种方式实现:
1. 使用 `SplitChunksPlugin` 插件:这个插件可以根据一些规则将代码分割成不同的块,比如将公共代码分割到一个块中,将第三方库分割到另一个块中,将异步加载的代码分割到一个块中等等。可以通过在 webpack 配置文件中配置 `optimization.splitChunks` 来使用该插件。
```javascript
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
```
2. 使用 `import()` 动态导入语法:这个语法可以让我们在需要的时候才加载代码块,从而减少首次加载的时间。可以使用 `dynamic import` 的方式来实现分块。
```javascript
import('./path/to/module')
.then((module) => {
// use the module
})
.catch((error) => {
// handle error
});
```
以上两种方式都可以实现代码分包,具体应该根据项目的需求和特点来选择合适的方式。
webpack的 optimization
optimization 是 webpack 的一个配置项,用于优化打包后的代码。
optimization 中包含了一些优化的配置项,例如:
- minimize:是否开启代码压缩,默认为 true;
- minimizer:指定使用哪些压缩插件,例如 UglifyJsPlugin、TerserPlugin 等;
- splitChunks:用于代码分割,提取公共代码,避免重复打包;
- runtimeChunk:用于提取每个入口文件的运行时代码,避免重复打包。
其中,splitChunks 和 runtimeChunk 都是用于代码分割的配置项。
splitChunks 配置项的默认值如下:
```
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
```
这个配置项会将所有符合条件的模块打包成一个单独的文件,并且自动处理模块间的依赖关系。例如,如果有两个入口文件都引用了同一个模块,webpack 会将这个模块提取成一个单独的文件,避免重复打包。
runtimeChunk 配置项的默认值如下:
```
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
}
```
这个配置项会将每个入口文件的运行时代码提取成一个单独的文件,避免重复打包。例如,如果有两个入口文件都使用了相同的第三方库,webpack 会将这个库的代码提取成一个单独的文件,并且将每个入口文件的运行时代码提取成另一个单独的文件。这样做的好处是,当我们修改了某个入口文件的代码时,只需要重新打包这个入口文件和它对应的运行时代码,而不需要重新打包第三方库的代码。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)