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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了nginx和vue开启双gzip压缩的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1651字，纯文字阅读大概需要3分钟。

内容图文

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,验证

打开浏览器

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

内容总结

以上是互联网集市为您收集整理的nginx和vue开启双gzip压缩的方法全部内容，希望文章能够帮你解决nginx和vue开启双gzip压缩的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---