Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度!
文章转载自:https://mp.weixin.qq.com/s/NuTmEUQU5L69is53bCauKA
Nginx 中配置前端的 gzip 压缩,有两种思路:
- Nginx 动态压缩,静态文件还是普通文件,请求来了再压缩,然后返回给前端。
- Nginx 静态压缩,提前把文件压缩成 .gz 格式,请求来了,直接返回即可。
Nginx 动态压缩
动态压缩 Vue 还是使用普通的打包编译后的文件,将前端编译打包后的文件拷贝到 Nginx 的 html 目录下,然后访问 nginx
确保 nginx 运行成功后,接下来对 nginx 进行配置:
gzip on; # 开启 gzip
gzip_min_length 2k;# 超过 2kb 进行压缩
gzip_disable msie6; # ie6 不适用 gzip
gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要处理的文件
配置完成后,重启 Nginx, 启动成功后,再去访问前端页面,就可以看到压缩效果了。
Nginx 静态压缩
上面的动态压缩有一个问题,就是每次请求响应的时候都要压缩,其实都是相同的文件,总是压缩有点浪费资源。
我们可以提前将文件压缩好,就保存在服务端,需要用的时候直接返回,就会方便很多。
这需要我们首先在前端安装压缩插件:
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
})
]
}
}
}
}
- threshold 表示超过 1kb 的文件就进行压缩。
- deleteOriginalAssets 表示压缩后是否删除原文件。
配置完成后,再次执行打包命令 vue-cli-service build。这次打包完成后,我们可以在 js 目录下看到 .gz
文件,如下:
接下来将文件上传到 Nginx 服务器,然后对 Nginx 重新进行编译打包。想让 Nginx 返回已经压缩好的文件,需要用到 Nginx 中的 http_gzip_static_module 模块,这个模块可以发送以 .gz 作为文件扩展名的预压缩文件,所以我们要对 Nginx 重新进行编译打包:
./configure --with-http_gzip_static_module
make
make install
然后在 Nginx 配置文件中开启 gzip_static,如下:
gzip_static on;
注意,开启了 gzip_static 后,gzip_types 就失效了,所以也没必要配置这个属性了。
静态压缩返回的 gzip 压缩文件都是提前准备好的,没有 .gz 格式的文件就会自动返回原文件。这是一种和动态压缩不同的响应策略。动态压缩是根据 Nginx 中的配置,超过配置的大小就会自动进行压缩。
配置完成后,重启 Nginx,再去访问,查看浏览器日志,就会发现 gzip 已经生效了。
Nginx 动态压缩与静态压缩,显著提高前后端分离项目响应速度!的更多相关文章
- Linux、Debian、Jenkins、GIT、Nginx、码云安装,自动化部署前后端分离项目
1.安装Jenkins i:下载Jenkins安装包(war文件):https://jenkins.io/download/ ii:这里采用Tomcat的war包方式安装,讲下载好的安装包放到Tomc ...
- 使用 Nginx 部署前后端分离项目,解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
- nginx+vue+uwsgi+django的前后端分离项目部署
Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...
- nginx反向代理前后端分离项目(后端多台)
目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常Spring ...
- vue+uwsgi+nginx部署前后端分离项目
前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...
- 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
- 前后端分离项目 nginx配置实践
新项目采用前后端分离的方式开发,前后端代码打算分开部署(同机器且同域名),但打算支持后端依然可访问静态资源. 搜索nginx配置大部分都通过url前缀进行转发来做前后端分离,不适用目前项目. 说明 前 ...
- 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...
- docker+nginx+redis部署前后端分离项目!!!
介绍本文用的经典的前后端分离开源项目.项目的拉取这些在另一篇博客!!! 其中所需要的前后端打包本篇就不做操作了!!不明白的去看另一篇博客!!! 地址:http://www.cnblogs.com/ps ...
随机推荐
- 如何在.Net Framework应用中请求HTTP2站点
背景介绍 本文的需求背景是对接苹果公司的推送服务(APNS),苹果在安全方面比较积极,已经严格限制API只支持HTTP2.但是我这里的应用目前仍然是.NET Framework平台,所以必须寻找一种解 ...
- Iterator接口介绍和迭代器的代码实现
定义:Iterator接口是Java集合框架中的一员. 作用:Collection接口与Map接口主要用于存储元素. 常用方法: boolen hasNext(); //判断游标右边是否还有元 ...
- 【ASP.NET Core】自定义的配置源
本文的主题是简单说说如何实现 IConfigurationSource.IConfigurationProvider 接口来自定义一个配置信息的来源,后面老周给的示例是实现用 CSV 文件进行应用配置 ...
- Harbor-私有镜像仓库的安装部署
Harbor 安装条件 官网给出了安装需要的最低硬件和软件的条件:https://goharbor.io/docs/2.0.0/install-config/installation-prereqs/ ...
- Error Code: 1054. Unknown column '字段名' in 'field list'
问题描述: j博主在java开发过程中,通过读取excel中表名和字段名,动态创建insert的SQL语句,在mysql可视化工具中执行此SQL语句时,一直提示"Error Code: 10 ...
- 对 API 平台的再思考【eolink翻译】
API 是推动现代企业数字化转型的基础.它不但连接了内部应用程序.合作伙伴和客户,同时也快速持续地向市场提供了各种新产品.版本和功能. 但当下还是以集中式的 API 交付为主.一个企业的对外 API ...
- 161_可视化_Power BI 复刻 GitHub 贡献热力图
161_可视化_Power BI 复刻 GitHub 贡献热力图 一.背景 在 GitHub 上,有用户的贡献度的热力图如下: Power BI 公共 web 效果:https://demo.jiao ...
- 在CDH webUI中部署HDFS HA
一.点击hdfs按钮进入hdfs配置界面 二.开始部署hdfs ha 三.分配角色 设置存储路径,这个可以自定义,我还在学习阶段我就默认了,之前改过,没起来,默认就好了:
- Vue3 使用v-md-editor如何动态上传图片了
Vue3 使用v-md-editor如何动态上传图片了 前端代码: <v-md-editor :autofocus="true" v-model="blog.con ...
- fijkplayer问题反馈:暂停时拖动进度光标,在窗口模式与全屏模式间切换后,进度光标不能及时更新、正常跟进
fijkplayer-0.8.4很优秀,造福苍生,非常感谢! 使用fijkplayer-0.8.4开发的过程中遇到以下问题,特此记录.提交上传:https://github.com/befovy/fi ...