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

第一步，在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩：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.1.12。

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

第五步，安装低版本compression-webpack-plugin：npm install --save-dev compression-webpack-plugin@1.1.2

第六步，再次运行 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;

}

 

注意：过程中可能出现的报错：

throw new ValidationError(ajv.errors, name);
    ^

ValidationError: Compression Plugin Invalid Options

options should NOT have additional properties

    at validateOptions (E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\node_modules\schema-utils\src\validateOptions.js:32:11)

building for production...E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\dist\index.js:175
    compiler.hooks.emit.tapAsync({ name: 'CompressionPlugin' }, emit);
                   ^

TypeError: Cannot read property 'emit' of undefined
    at CompressionPlugin.apply (E:\workspace\webpack-stack\analyze-demo\node_modules\compression-webpack-plugin\dist\index.js:175:20)