vue项目开启Gzip压缩和性能优化

第一步，在vue项目中安装依赖并将config/index.js中 productionGzip改为true，开启Gzip压缩：

然后安装插件compression-webpack-plugin

	npm install --save-dev compression-webpack-plugin

第二步，运行 npm run build打包项目

这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。

第三步，再次运行 npm run build打包项目

这时可能会继续报错，提示TypeError: Cannot read property ‘emit’ of undefined。据我查证，是安装的compression-webpack-plugin依赖有问题，需要卸载compression-webpack-plugin更改安装低版本 v1.12。

卸载

npm uninstall --save-dev compression-webpack-plugin

安装

npm install --save-dev compression-webpack-plugin@1.1.2

第四步，再次运行 npm run build打包项目

此时dist文件里面的js文件便会出现xxxx.js.gz文件。

第五步，开启 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;

}

vue开启gzip性能优化主要分为两部分，成功开启后将大大优化vue首页加载时长。