文章转载自: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 动态压缩与静态压缩,显著提高前后端分离项目响应速度!的更多相关文章

  1. Linux、Debian、Jenkins、GIT、Nginx、码云安装,自动化部署前后端分离项目

    1.安装Jenkins i:下载Jenkins安装包(war文件):https://jenkins.io/download/ ii:这里采用Tomcat的war包方式安装,讲下载好的安装包放到Tomc ...

  2. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  3. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  4. nginx反向代理前后端分离项目(后端多台)

    目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常Spring ...

  5. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  6. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  7. 前后端分离项目 nginx配置实践

    新项目采用前后端分离的方式开发,前后端代码打算分开部署(同机器且同域名),但打算支持后端依然可访问静态资源. 搜索nginx配置大部分都通过url前缀进行转发来做前后端分离,不适用目前项目. 说明 前 ...

  8. 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...

  9. docker+nginx+redis部署前后端分离项目!!!

    介绍本文用的经典的前后端分离开源项目.项目的拉取这些在另一篇博客!!! 其中所需要的前后端打包本篇就不做操作了!!不明白的去看另一篇博客!!! 地址:http://www.cnblogs.com/ps ...

随机推荐

  1. 一文读懂数仓中的pg_stat

    摘要:GaussDB(DWS)在SQL执行过程中,会记录表增删改查相关的运行时统计信息,并在事务提交或回滚后记录到共享的内存中.这些信息可以通过 "pg_stat_all_tables视图& ...

  2. python单元测试框架笔记

    目录 单元测试概述 什么是单元测试 单元测试什么进行? 单元测试由谁负责? 单元测试需要注意 单元测试覆盖类型 python 单元测试框架 unittest pytest 测试框架 单元测试概述 什么 ...

  3. HashSet集合存储数据的结构和HashSet集合存储元素不重复的原理

    HashSet集合存储数据的结构 HashSet集合存储元素不重复的原理 //创建HashSet集合对象 Hashset<String> set = new HashSet<> ...

  4. 传统 API 管理与测试过程正面临严峻的挑战

    随着测试左移思想的引入, API (应用程序编程接口)经济的飞速增长导致对 API 管理平台的需求相应增加.越来越多的企业注重并关注接口测试.单纯的做接口测试或者做好接口测试的本质工作其实并不复杂: ...

  5. 2022-7-19 第五组 pan小堂 封装和 this

    this关键字 this关键字由来和使用: A:this:代表所在类的对象引用方法被哪个对象调用,this就代表那个对象 B:什么时候使用this呢 ? 局部变量和成员变量重名 set 和 get 方 ...

  6. 丽泽普及2022交流赛day18 社论

    A 暴力扫一遍 B 算法 0 似乎是二分 算法 1 随便贪心 C 算法 1 枚举一个点作为最大值 / 最小值,用单调栈维护其作为答案的左右端点即可轻易计算 . 时间复杂度 \(O(n)\) . 算法 ...

  7. Java开发学习(二十一)----Spring事务简介与事务角色解析

    一.Spring事务简介 1.1 相关概念介绍 事务作用:在数据层保障一系列的数据库操作同成功同失败 Spring事务作用:在数据层或业务层保障一系列的数据库操作同成功同失败 数据层有事务我们可以理解 ...

  8. Python3.7爬虫:实时api(百度ai)检测验证码模拟登录(Selenium)页面

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_134 今天有同学提出了一个需求,老板让自动登录这个页面:https://www.dianxiaomi.com/index.htm, ...

  9. 关于MySQL function创建的限制

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. MySQL 的function创建会有各种限制,经常使用的语句的限制如下: 1.CONTAINS_DYNAMIC_SQL ...

  10. MySQL之JDBC编程增删改查

    MySQL之JDBC 一.JDBC是什么 Java DatabaseConnectivity (java语言连接数据库) 二.JDBC的本质 JDBC是SUN公司制定的一套接口(interface). ...