vue项目优化一

vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能

• 第一步，在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩：npm install --save-dev compression-webpack-plugin

  
  
  Snipaste_2019-05-16_16-18-50.png

• 第二步，运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。

Snipaste_2019-05-16_16-19-51.png

Snipaste_2019-05-16_16-20-05.png

• 第三步，再次运行 npm run build打包项目，这时可能会继续报错，提示TypeError: Cannot read property 'emit' of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本 v1.12。

Snipaste_2019-05-16_16-21-14.png

• 第四步，卸载当前安装的compression-webpack-plugin：npm uninstall --save-dev compression-webpack-plugin

Snipaste_2019-05-16_16-22-22.png

• 第五步，安装低版本compression-webpack-plugin：npm install --save-dev [email protected]

Snipaste_2019-05-16_16-23-04.png

• 第六步，再次运行 npm run build打包项目，这时将正常包vue项目，愉(ku)快(bi)的j将vue开发上线了。

• 第七步，开启 nginx 服务端 gzip性能优化。找到nginx配置文件在 http 配置里面添加如下代码，然后重启nginx服务即可。

  http:{ 
  
      gzip on; 
  
      gzip_static on;
  
      gzip_buffers 4 16k;
  
      gzip_comp_level 5;
  
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
  
       image/gif image/png;
  
  }
  

  Snipaste_2019-05-16_16-25-04.png