vue使用gzip压缩和nginx配置

vue.config.js配置

//安装compression-webpack-plugin
npm i compression-webpack-plugin


const CompressionPlugin = require("compression-webpack-plugin")

configureWebpack: {
    plugins: [
      new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.html$|.\css/, //匹配文件名
        threshold: 10240,//对超过10k的数据压缩
        deleteOriginalAssets: true //不删除源文件
      })
    ]
}

2.如果打包报错,则安装低版本compression-webpack-plugin解决

3.进行nginx配置

    #gzip开启和关闭
    gzip on|off;
    
    #gizp压缩起点
    gzip_min_length 1k;
    
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 1;
    
    # 压缩文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    
    #静态文件开启关闭
    gzip_static on|off
    
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers 2 4k;

    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;

如果启动nginx提示，则进入nginx解压目录,进行配置并安装

nginx: [emerg] unknown directive “gzip_static“ in

## 配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

## 重新安装
make && make install