一、目的“compression-webpack-plugin”插件可以将前端打包好的资源文件通过压缩算法进一步压缩，生成一个指定的、更小的压缩文件，从而浏览器可以更快地加载资源。2、前端配置（vue.config.js）打包过程中，可能会遇到“TypeError:Cannotreadproperty'tapPromise'ofundefined”等错误。这是因为安装的“compression-webpack-plugin”版本太高，可以通过安装低版本解决（cnpmi-Dcompression-webpack-plugin@6.1.0）。“文件名”配置项必须明确指定，否则生成的压缩文件在vuecli创建的2.x和3.x项目中的位置会不一样。constCompressionWebpackPlugin=require('compression-webpack-plugin');module.exports={productionSourceMap:false,configureWebpack:config=>{config.plugins.push(newCompressionWebpackPlugin({filename:'[path][name].gz',测试:/\.(js|css)$/i}));}}“npmrunbuild”后，可以发现生成了很多“.gz”格式的文件，而且这些文件是压缩过的。3、服务端配置生成的压缩文件不能直接使用，必须服务端配置后才能使用，发现打包生成的“dist/index.html”首页并没有直接引用这些“.gz”格式文件。实现的关键其实就是让服务端向浏览器发送响应头“Content-Encoding=gzip”，并发送相应的“.parse”资源。nodejs实现将打包后的文件扔到nodejs服务环境中，执行以下代码。constpath=require('路径');constfs=require('fs');constexpress=require('快递');constapp=express();app.use((request,response,next)=>{constfullPath=path.join(__dirname,`${request.originalUrl}.gz`);//检测是否有同名的.gz压缩文件if(fs.existsSync(fullPath)){//如果存在，则告诉浏览器使用gzip编码格式解析，并将对应的“.gz”格式文件发送给浏览器response.setHeader('Content-Encoding','gzip')response.sendFile(fullPath);}else{next()}})app.use(express.static('./'));app.listen(1055,_=>{console.log('1055服务器已经启动');});通过访问“http://localhost:1055/”，可以发现浏览器已经可以读取这些“.gz”格式的文件，即使删除了打包后的非压缩文件。nginx实现（nginx.conf）可以在http模块中配置“gzip_staticon”。http{gzip_staticon;}4.压缩库这是一个nodejs压缩中间件，提供类似“compression-webpack-plugin”的功能，所以如果是nodejs服务开发，使用这个库，那么前端不会有如有必要，请使用“compression-webpack-plugin”。·以上内容是查阅相关资料，结合个人理解，简述而成。更详细的配置请参考官方文档。如果有任何错误，请随时纠正我。·参考compression-webpack-plugin:https://www.npmjs.com/package...compression:https://www.npmjs.com/package...
