webpack的 optimization
时间: 2023-10-14 13:26:40 浏览: 43
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 会将这个库的代码提取成一个单独的文件,并且将每个入口文件的运行时代码提取成另一个单独的文件。这样做的好处是,当我们修改了某个入口文件的代码时,只需要重新打包这个入口文件和它对应的运行时代码,而不需要重新打包第三方库的代码。