vue项目gzip打包

打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验

Vue-cli3.0项目

1 npm install compression-webpack-plugin@1.1.1 --save-dev （使用1.1.1版本 如果打包出现问题可能和版本有关系）

2 vue.config.js

const CompressionPlugin = require('compression-webpack-plugin');

configureWebpack: config => {    
    config.plugins.push(        
        new CompressionPlugin({            
            algorithm: 'gzip', // 使用gzip压缩            
            test: /\.js$|\.html$|\.css$/, // 匹配文件名           
            filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)  
            minRatio: 1, // 压缩率小于1才会压缩            
            threshold: 10240, // 对超过10k的数据压缩            
            deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）        
        })    
    )
},

3 nginx配置

添加 gzip_static on 开启gizp

#gzip  on;
gzip_static on;

压缩前

压缩后