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 ...
随机推荐
- CentOS查看操作系统安装时间信息:
CentOS查看系统安装时间信息: 方法1:[root@logserver ~]# ll /boot/|egrep -i "(grub|lost\+found)" 方法2:[ro ...
- 霍普菲尔得神经网络(Hopfield Neural Network)
设计一个反馈网络存储下列目标平衡点: T = [ 1 -1; -1 1 ]; 并用6组任意随机初始列矢量,包括一组在目标平衡点连线的垂直平分线上的一点作为输入矢量对所设计的网络的平衡点进行测试,观 ...
- 项目中使用@Transactional需要注意的点
项目如果是Spring Boot.或者Spring Cloud,切记需要在启动类上加入@EnableTransactionManagement该注解.否则事务不生效. @Transactional是一 ...
- python sock5代理
安装 pysocks:pip install pysocks # coding:utf-8 ''' @version: python3.6 @author: 'eric' @license: Apac ...
- 安装linux下一些常用软件
1.先卸载一些不常用的软件 apt purge ufw lxd lxd-client lxcfs lxc-common 2.安装一些常用软件 apt install iproute2 ntpdate ...
- Junit使用步骤和junit_@Before&@After
测试: 1.定义一个测试类(测试用例) 建议: 测试类名:被测试的类型Test CalculatorTest 包名:xxx.xxx.xx.test com.li.Test 2.定义测试方法:可以独立运 ...
- C# 发送Http请求,传文件和其他参数
/// <summary> /// httpWebRequest post by dic /// </summary> /// <param name="url ...
- mybatis 01: 静态代理 + jdk动态代理
背景 有时目标对象不可直接访问,只能通过代理对象访问 图示: 示例1: 房东 ===> 目标对象 房屋中介 ===> 代理对象 你,我 ===> 客户端对象 示例2: 运营商(电信, ...
- 让Python更优雅更易读(第一集)
变量和注释 1.变量 在编写变量尽量要让其清晰只给,让人清除搞清楚代码的意图 下方两段代码作用完全一样,但第二段代码是不是更容易让人理解 value = s.strip() username = in ...
- LuoguP5390 [Cnoi2019]数学作业(数论)
转进制,然后发现贡献只有\(1_{(2)}\),取奇数个的子集方案是\(2^{n-1}\) #include <iostream> #include <cstdio> #inc ...