webpack optimization
时间: 2023-04-24 08:03:42 浏览: 125
Webpack 优化是指通过各种手段来提高 Webpack 打包的效率和性能,以减少页面加载时间和提升用户体验。这些手段包括但不限于代码分割、懒加载、缓存、压缩、Tree Shaking 等。通过这些优化,可以使得 Webpack 打包后的文件更小、更快,从而提高网站的性能和用户体验。
相关问题
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 会将这个库的代码提取成一个单独的文件,并且将每个入口文件的运行时代码提取成另一个单独的文件。这样做的好处是,当我们修改了某个入口文件的代码时,只需要重新打包这个入口文件和它对应的运行时代码,而不需要重新打包第三方库的代码。
webpack5中optimization
webpack5中的optimization是用于配置优化相关的选项。它可以帮助你优化打包后的代码,提高应用程序的性能和加载速度。
以下是一个示例,展示了如何在webpack5中配置optimization:
```javascript
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// ...其他配置项
optimization: {
minimize: true, // 是否启用代码压缩
minimizer: [
new TerserPlugin({
// TerserPlugin用于压缩JavaScript代码
terserOptions: {
format: {
comments: false, // 是否保留注释
},
},
extractComments: false, // 是否提取注释到单独的文件
}),
],
splitChunks: {
chunks: 'all', // 代码分割,将公共模块提取到单独的文件
},
},
};
```
上述配置中,我们使用了TerserWebpackPlugin来压缩JavaScript代码。通过设置minimize为true,启用代码压缩。minimizer选项用于配置具体的压缩插件,这里我们使用了TerserPlugin。通过设置splitChunks,我们可以将公共模块提取到单独的文件,以减少重复加载的代码。
请注意,以上只是一个示例配置,你可以根据自己的需求进行调整和扩展。