首先: 需要 在项目中下载 npm install compression-webpack-plugin@5.0.1 (我是安装在项目依赖中的dependencies)
其次:在项目中找到vue.config.js文件然后 找到 configureWebpack项
也可以这样写 test:/\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i
configureWebpack: (config) => {
config.plugins.push(new CompressionWebpackPlugin({
filename: '[path][base].gz',//[file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串
algorithm: 'gzip',//压缩成gzip
//所有匹配该正则的资源都会被处理。默认值是全部资源。
test: /\.(js|css|woff|woff2|ttf|eot|png|svg|jpg|jpeg)(\?.*)?$/i,
// test: /\.js$|\.css$|\.html$|\.woff2$|\.woff$|\.ttf$|\.eot$|\.png$|\.svg$|\.jpg$|\.jpeg$/,
// threshold: 10240,//只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
minRatio: 0.8,//只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
deleteOriginalAssets: true//删除原来代码
}))
还有一种写法
配置完成之后打包的js,css.html 后缀都变成 .gz