Gzip压缩文件
压缩文件可以减少文件下载时间，让用户体验性更好。 在 webpack 可以使用如下插件进行压缩：
- JavaScript：UglifyPlugin
- CSS ：MiniCssExtractPlugin
- HTML：HtmlWebpackPlugin
其实，我们还可以做得更好。那就是使用 gzip 压缩。可以通过向 HTTP 请求头中的 Accept-Encoding 头添加 gzip 标识来开启这一功能。当然，服务器也得支持这一功能。
gzip 是目前最流行和最有效的压缩方法。举个例子，我用 Vue 开发的项目构建后生成的 app.js 文件大小为 3.2MB，使用 gzip 压缩后只有 1.5MB，体积减少了将近 60%。
附上 webpack 配置 gzip 的使用方法
安装依赖
npm install terser-webpack-plugin@4.2.3
npm install compression-webpack-plugin --save-dev
npm install compression
vue.config.js 配置信息参考如下：
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|ico|svg)(\?.*)?$/i
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
configureWebpack: config => {
config.optimization = {
minimize: process.env.NODE_ENV === 'production',
minimizer: [
new TerserPlugin({
test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
parallel: true, // 使用多进程并发运行
terserOptions: {
// Terser 压缩配置
output: { comments: false }
},
extractComments: false // 将注释剥离到单独的文件中
})
]
}
},
chainWebpack(config) {
if (process.env.NODE_ENV === 'production') {
// 压缩
config.plugin('compressionPlugin').use(
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,// 只处理比值大的文件，即超过10kb的文件
minRatio: 0.8,// 压缩效率大于80%
// deleteOriginalAssets: false // 是否删除源文件
})
)
}
}
}
打包：
npm run build
错误：Cannot read property 'tapPromise' of undefined
解决方法：
先卸载，再装个低一点的版本
npm uninstall compression-webpack-plugin
npm i compression-webpack-plugin@5.0.1
