当我们的项目打包上线时，发现构建后的包很大，最终导致首屏加载速度变慢。Gzip可以非常明显和有效地解决这个问题。它的原理是对原有的js和css文件进行压缩，从而减小文件体积，加快首屏访问速度。下面是Gzip的相关配置1.在vue项目中找到vue。conf.js文件（旧版本配置在config/index.js&build/webpack.prod.conf.js）2.在文件头引入compression-webpack-plugin&定义压缩文件类型配置如下3.下面添加plugins的关键配置即可。vue.conf.js完整代码//importcompression-webpack-pluginconstCompressionWebpackPlugin=require('compression-webpack-plugin')//定义压缩文件类型constproductionGzipExtensions=['js','css']module.exports={pages:{index:{entry:"src/main.js",//template:"public/index.html",//filename:"index.html",//当使用标题选项时，//模板中的title标签需要为
<%=htmlWebpackPlugin.options.title%>title:"商户后台管理"}},//fixHMRchainWebpack:config=>{config.解析符号链接（真）；},//端口配置devServer:{//host:"192.168.1.200",port:8080,//端口号hotOnly:false,https:false,//https:{type:Boolean}open:true,//配置浏览器自动启动proxy:null//配置跨域处理，只有一个代理},css:{sourceMap:false,loaderOptions:{//importsass公共变量文件sass:{prependData:`@import"@/assets/element-variables.scss";`}}},configureWebpack:{plugins:[newCompressionWebpackPlugin({文件名:'[path].gz[query]',algorithm:'gzip',test:newRegExp('.('+productionGzipExtensions.join('|')+')$'),threshold:10240,minRatio:0.8})]},//是否开启eslintlintOnSave:false,//不生成.map文件打包时productionSourceMap:false,};4、当我们在终端运行npmrunbuild，会发现有一个.gz文件，证明成功了！dist文件夹提交变大是正常的，因为我们没有删除源文件5.最后一步配置gzipuserroot;worker_processes1;error_log/var/log/nginx/error.logwarn;pid/在nginx.confvar/run/nginx.pid;events{worker_connections1024;}http{include/etc/nginx/mime.types;default_type应用程序/八位字节流；log_formatmain'$remote_addr-$remote_user[$time_llocal]"$request"''$status$body_bytes_sent"$http_referer"''"$http_user_agent""$http_x_forwarded_for"';access_log/var/log/nginx/access.logmain;发送文件；#tcp_nopush上;keepalive_timeout65；#gzip上；gzip上；gzip_min_length1k;gzip_buffers416k;#gzip_http_version1.0;gzip_comp_level2；gzip_types文本/普通应用程序/javascript应用程序/x-javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png；gzip_vary关闭；gzip_disable"MSIE[1-6].";proxy_buffering关闭；proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-Proto$scheme;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_http_version1.1;client_max_body_size10M;包括/etc/nginx/conf.d/*.conf；服务器{听80;服务器名称xxx;}}6.重启nginx，用站长Gzip检测工具检查一下，大功告成！
