本篇内容主要讲解“Nginx动态压缩与静态压缩怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Nginx动态压缩与静态压缩怎么实现”吧!
Nginx 中配置前端的 gzip 压缩，有两种思路：
动态压缩 Vue 还是使用普通的打包编译后的文件，将前端编译打包后的文件拷贝到 Nginx 的 html 目录下，然后访问 nginx：http://192.168.91.129
确保 nginx 运行成功后，接下来对 nginx 进行配置：
计算
安全
数据库
网络和加速
企业服务
gzip on; # 开启 gzipgzip_min_length 2k;# 超过 2kb 进行压缩gzip_disable msie6; # ie6 不适用 gzipgzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要处理的文件配置完成后，重启 Nginx：
./nginx -s reload
启动成功后，再去访问前端页面，就可以看到压缩效果了。
上面的动态压缩有一个问题，就是每次请求响应的时候都要压缩，其实都是相同的文件，总是压缩有点浪费资源。
我们可以提前将文件压缩好，就保存在服务端，需要用的时候直接返回，就会方便很多。
这需要我们首先在前端安装压缩插件：
npm install compression-webpack-plugin -D
安装成功之后，接下来在 vue.config.js 中进行配置：
const CompressionPlugin = require("compression-webpack-plugin")module.exports = { devServer: { host: 'localhost', port: 8080, proxy: proxyObj }, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 1024, deleteOriginalAssets: false }) ] } } }}配置完成后，再次执行打包命令 vue-cli-service build。这次打包完成后，我们可以在 js 目录下看到 .gz 文件，如下：
接下来将文件上传到 Nginx 服务器，然后对 Nginx 重新进行编译打包。想让 Nginx 返回已经压缩好的文件，需要用到 Nginx 中的 http_gzip_static_module 模块，这个模块可以发送以 .gz 作为文件扩展名的预压缩文件，所以我们要对 Nginx 重新进行编译打包：
./configure --with-http_gzip_static_modulemakemake install
然后在 Nginx 配置文件中开启 gzip_static，如下：
gzip_static on;注意，开启了 gzip_static 后，gzip_types 就失效了，所以也没必要配置这个属性了。
配置完成后，重启 Nginx，再去访问，查看浏览器日志，就会发现 gzip 已经生效了。
「注意」
静态压缩返回的 gzip 压缩文件都是提前准备好的，没有 .gz 格式的文件就会自动返回原文件。这是一种和动态压缩不同的响应策略。动态压缩是根据 Nginx 中的配置，超过配置的大小就会自动进行压缩。
到此，相信大家对“Nginx动态压缩与静态压缩怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/3669799/blog/4394529
