nginx和vue开启双gzip压缩的方法

1,在项目中使用gzip压缩

这里使用的插件为：CompressionWebpackPlugin

如果你是webpack:

const CompressionWebpackPlugin = require（'compression-webpack-plugin'）
//无配置
module.exports = { 
    “plugins”：[new CompressionWebpackPlugin] 
}
//配置
webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(js|css)$'),
      // 只处理大于xx字节 的文件，默认：0
      threshold: 10240,
      // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
      minRatio: 0.8 // 默认: 0.8
      // 是否删除源文件，默认: false
      deleteOriginalAssets: false
    })
)

如果你是vue,使用vue.config.js:

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "assets",
  indexPath: "index.html",
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(js|css)$"),
        // 只处理大于xx字节 的文件，默认：0
        threshold: 10240,
        // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
        minRatio: 0.8, // 默认: 0.8
        // 是否删除源文件，默认: false
        deleteOriginalAssets: false
      })
    ]
  }
};

打包的时候看有没有.gz结尾的文件,如果有,说明成功

2,开启nginx服务端的gzip压缩

打开nginx的配置文件nginx.conf

gzip  on;

    server {
        gzip_static on;    
        gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_proxied  any;
        gzip_vary on;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        # 注：99.99%的浏览器基本上都支持gzip解压了，所以可以不用设这个值,保持系统默认即可。
        gzip_http_version 1.1; 

3,验证

打开浏览器

如果有这种东西,说明成功!