maxSize webpack
时间: 2023-06-29 10:20:15 浏览: 38
"maxSize" 是 webpack 中的一个配置选项,用于限制生成的输出文件的最大大小。如果输出文件的大小超过了限制,webpack 会抛出一个警告或者错误信息,以提醒开发者进行优化或者拆分文件。
可以在 webpack 的配置文件中通过以下方式进行设置:
```javascript
module.exports = {
// ...
performance: {
maxSize: 500000, // 最大文件大小,单位为字节
},
};
```
以上代码中,将 `performance` 对象的 `maxSize` 属性设置为 500000,即限制输出文件的最大大小为 500KB。如果需要关闭此限制,可以将 `maxSize` 属性设置为 0 或者 false。
相关问题
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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)