前言：前端性能优化方案很多，本文尝试压缩解决方案——前端包使用compression-webpack-plugin压缩静态资源的插件，服务端在Nginx开启Gzip属性。这样，当Nginx访问一个资源时，如果该资源有gz文件，就会去请求gz文件。compression-webpack-plugin：它是一个webpack压缩插件。在webpack构建的vue项目中，引入这个插件后，npmrunbuild不仅会生成压缩的静态资源（JS，css），还会生成gz形式的JS和CSS。前端配置：先安装插件compression-webpack-plugin，cnpminstallcompression-webpack-plugin@6.1.1如果你是vueinitwebpackxxx创建的项目，修改config.js——开启压缩功能:(此函数默认为false):如果你是vue.config.js文件，在chainWebpack中添加如下代码：constCompressionWebpackPlugin=require('compression-webpack-plugin')if(process.env.NODE_ENV==='生产'）{配置。plugin('CompressionPlugin').use(newCompressionWebpackPlugin({test:/\.(js|css)$/,threshold:10240,//压缩超过10kb的文件deleteOriginalAssets:false,//不删除源文件minRatio:0.8}))}如下图所示：如上，前端配置完成，打包试试看！！！服务端Nginx配置：我自己实验使用本地Nginx，修改了nginx.conf，具体在HTTP{}中添加如下代码：gzipon;#打开静态gz文件并返回gzip_staticon;gzip_buffers324K；gzip_comp_level6;gzip_min_length1k;gzip_types文本/普通应用程序/javascript应用程序/x-javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png图像/x-icon；gzip_disable"MSIE[1-6]\.";#配置禁用gzip条件，这里支持正则表达式是指ie6及以下不启用gzip（因为低版本的ie不支持）#是否在http头中添加Vary:Accept-Encoding，建议开启gzip_vary开启；练习复制dist文件到本地Nginxhtml文件，在Nginx中配置跳转：server{listen3000;服务器名称本地主机；位置/{根html;索引/dist/index.html；}location/static{roothtml/dist;}}在cmd中启动Nginx，访问localhost:3000。观察网络可以发现差异（注释Nginx的Gzip查看差异）：问题总结遇到的问题比较多，网上也找不到具体的资料分享解决方法在这里：1-创建项目后withvueinitwebpackxxx，我按照网上的方法在webpack.config.js中的pluigins中添加了compression-webpack-plugin插件，然后npmrunbuildError:TypeError:Cannotreadproperty'thisCompilation'ofundefined压缩-此时安装的webpack-plugin插件版本是最新的——7.1.2。网上把所有node-modules都删了，然后重新安装，没用。解决方法：执行npminstallcompression-webpack-plugin@1.1.12.，不要修改plugins数组，因为config/index.js里面已经配置入口了，看前端配置2-遇到错误：ValidationError:Invalid选项对象。已使用与API模式不匹配的选项对象初始化压缩插件。解决方法：进入webpack.prod.config.js，修改如下：3-打包后报错：Cannotreadproperty'tapPromise'ofundefined解决方法：降低版本，cnpminstallcompression-webpack-plugin@6.1.14-installedwith警告，构建错误：ValidationError：无效的选项对象。已使用与API模式不匹配的选项对象初始化压缩插件。解决方法：因为我的webpack版本是3.6.0，太低了。至少需要4.0webpack。建议升级webpack。除了升级版本，还有一些配置文件需要修改。其他问题Q：为什么有些资源没有生成gz文件？A：因为资源包太小，不会压缩，大了会压缩：总结完了，有什么问题请留言。
