当前位置: 首页 > Web前端 > HTML

如何在前端配置gzip压缩

时间:2023-03-28 11:37:27 HTML

webpack有一个文件压缩插件,可以将大文件压缩成gzip格式。使用起来也很简单,先安装:npminstall--save-devcompression-webpack-plugin然后修改webpack配置(vue.config.js):constCompressionWebpackPlugin=require("compression-webpack-plugin");//可以添加其他需要的文件类型,比如json//不压缩图片,体积会比原来的大constproductionGzipExtensions=["js","css"];module.exports={configureWebpack:config=>{if(process.env.NODE_ENV==="production"){config.plugins.push(newCompressionWebpackPlugin({filename:'[path].gz[query]',algorithm:"gzip",test:newRegExp("\\.("+productionGzipExtensions.join("|")+")$"),threshold:10240,//压缩超过10k的数据minRatio:0.6//压缩率,值为0~1,deleteOriginalAssets:false//删除原文件}))}return{name:name,resolve:{alias:{'@':resolve('src')}}}}};配置完成后,npmrunbuild,我们可以看到文件已经被压缩了