【Nginx】前端项目开启 Gzip 压缩大幅提高页面加载速度

背景

Gzip 是一种文件压缩算法,减少文件大小,节省带宽从而提减少网络传输时间,网站会更快更丝滑。

// nginx
root@hcss-ecs-1d22:/etc/nginx# nginx -v
nginx version: nginx/1.24.0

// node
ndde v18.20.1

// dependencies
"vue": "^3.2.45",

// devDependencies
"vite": "^5.0.0",
"vite-plugin-compression": "^0.5.1"

Gzip 工作原理

  • 浏览器请求url,在请求头中设置属性 accept-encoding:gzip, deflate。表明浏览器支持 gzip,这个参数是浏览器自动会携带的请求头信息。
  • 服务器收到浏览器发送的请求之后,服务器会返回压缩后的文件,并在响应头中包含 content-encoding: gzip;如果没有压缩文件,返回未压缩的请求文件。
  • 浏览器接收到到服务器的响应,根据 content-encoding: gzip 响应头使用 gzip 策略去解压压缩后的资源,通过 content-type 内容类型决定怎么编码读取该文件内容。

使用 Gzip 压缩主要的两种姿势

动态压缩: 通过 nginx + gzip 来进行在线上实时压缩代码(前端不做额外处理) 。

静态压缩:打包构建使用webpack / vite 预先生成对应的 .gz 文件,让 nginx 直接使用已经压缩好的 .gz 文件 。

动态压缩

  • 动态压 其实就是服务端进行压缩 ,就是通过 nginx + gzip 来进行在线上压缩!
  • gzip 它是一个 ngxin 的一个内置功能模块。
  • 就是需要去开启 gzip 相关配置 , nginx 就可以去做相应的在线压缩处理
  • 缺点: 对服务端CPU 要求会比较高, 为了减少不可控制的因素,还是建议采用静态压缩的方式

nginx http 块中配置如下:

gzip on;
gzip_disable   "MSIE [1-6]\.";
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 4;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/cssapplication/xml application/xml+rss;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;

静态压缩

  • 在本地项目中配置 vite-plugin-compression 插件,打包生成 .gz文件。
  • 不用过于在意 cup 的负载,与峰值。
  • 但是需要在 ngxin 配置一个 gzip_static 静态压缩模块 。

nginx http 块中配置

gzip_static on;  

本地安装 vite-plugin-compression打包插件

npm i -D vite-plugin-compression

vite.config.js 中配置:

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
     viteCompression({
      // //压缩算法,可选['gzip’,'brotlicompress’....]
      algorithm: 'gzip',
      //大于·10kb·的文件压缩,默认为·10240
      threshold: 10240,
      //是否在控制台中输出压缩结果,线上最好设置为false
      verbose: true,
      // 压缩后是否删除源文件
      // deleteOriginFile: true
    })
  ]
})

验证

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908271.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在线教育辅助:SpringBoot试题库系统精讲

2 相关技术 2.1 Spring Boot框架简介 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。通过这种方式,Sprin…

【前端基础】CSS基础

目标:掌握 CSS 属性基本写法,能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容&#…

操作系统进程的描述与控制知识点

前趋图和程序执行 前趋图 定义: 前趋图是指一个有向无循环图,可记为 DAG,它用于描述进程之间执行的先后顺序图形表示: 程序的执行 程序顺序执行时,系统资源的利用率很低 程序顺序执行时的特征 顺序性封闭性可再现性 …

【观成科技】APT组织常用开源和商业工具加密流量特征分析

概述 在当前的网络安全环境中,APT组织的活动愈发频繁,利用其高级技术和社会工程手段,针对全球范围内的政府、军事和企业目标发起了一系列复杂的网络攻击。在不断升级的攻击中,开源和商业工具凭借其灵活性、易用性和全球化攻击能力…

自杀一句话木马(访问后自动删除)

在做安全测试时&#xff0c;例如文件上传时就要上传可以解析的脚本文件解析证明存在漏洞&#xff0c;这个时候就需要(访问后自动删除文件的一句话木马) PHP <?php echo md5(1);unlink(__FILE__); ?> 访问后自动删除

在Microsoft Outlook日历中添加多个时区

在Microsoft Outlook日历中添加多个时区 1.单击Outlook中的文件选项卡&#xff0c;单击选项 2.左侧菜单中选择日历 3.向下滚动到时区部分&#xff0c;并标记当前时区&#xff0c;比如China 4.选中“显示第二个时区”框 5.选择第二个时区并给它一个标签&#xff0c;比如Germa…

python常用的第三方库下载方法

方法一&#xff1a;打开pycharm-打开项目-点击左侧图标查看已下载的第三方库-没有下载搜索后点击install即可直接安装--安装成功后会显示在installed列表 方法二&#xff1a;打开dos窗口输入命令“pip install requests“后按回车键&#xff0c;看到successfully既安装成功&…

Rust 力扣 - 238. 除自身以外数组的乘积

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 这题主要有个关键点&#xff0c;就是元素能取0&#xff0c;然后我们分类讨论元素为0的数量 如果数组中存在至少两个元素为0&#xff0c;则每个元素的除自身以外的乘积为0如果数组中仅存在一个0&#xff0c;则为…

二、应用层,《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》

文章目录 零、前言一、应用层协议原理1.1 网络应用的体系结构1.1.1 客户-服务器(C/S)体系结构1.1.2 对等体&#xff08;P2P&#xff09;体系结构1.1.3 C/S 和 P2P体系结构的混合体 1.2 进程通信1.2.1 问题1&#xff1a;对进程进行编址&#xff08;addressing&#xff09;&#…

【计算机网络篇】数据链路层(14)虚拟局域网VLAN(概述,实现机制)

文章目录 &#x1f6f8;虚拟局域网VLAN&#x1f354;虚拟局域网VLAN的实现机制&#x1f95a;IEEE 802.1Q帧&#x1f95a;以太网交换机的接口类型&#x1f5d2;️例一&#xff1a;在一个交换机上不进行人为的VLAN划分&#xff0c;交换机各接口默认属于VLAN1且类型为Access的情况…

【无人机设计与控制】红嘴蓝鹊优化器RBMO求解无人机路径规划MATLAB

摘要 无人机在复杂环境中的路径规划是一个非线性、非凸优化问题&#xff0c;具有高维度和多约束性。本文提出了基于红嘴蓝鹊优化器&#xff08;RBMO&#xff09;的方法&#xff0c;用于求解无人机路径规划问题。RBMO算法借鉴了红嘴蓝鹊的觅食和群体行为&#xff0c;以全局搜索…

跨平台OFD、PDF文档预览UTS插件

〇、介绍 Seal-OfdReader是跨平台OFD文档预览原生插件&#xff0c;具有以下特点&#xff1a; 支持UniApp项目集成&#xff0c;也支持原生Android项目集成 非腾讯X5&#xff0c;无内核加载&#xff0c;高效率、稳定高可用 支持在线文档&#xff0c;也支持离线设备本地文档 支…

电机学习-SPWM原理及其MATLAB模型

SPWM原理及其MATLAB模型 一、SPWM原理二、基于零序分量注入的SPWM三、MATLAB模型 一、SPWM原理 SPWM其实是相电压的控制方式&#xff0c;定义三相正弦相电压的表达式&#xff1a; { V a m V m sin ⁡ ω t V b m V m sin ⁡ ( ω t − 2 3 π ) V c m V m sin ⁡ ( ω t 2…

CasaOS香橙派安装HomeAssistant智能家居系统并实现远程管理家中智能设备

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

哈希表,哈希桶及配套习题

我们今天带大家简单了解哈希表是怎样的&#xff0c;和简单模拟哈希桶&#xff0c;还有几道练习题 一&#xff0c;哈希表 什么是哈希表&#xff0c;哈希表是一种非常非常高效的数据结构&#xff0c;它用来搜索我们想要的数据&#xff0c;我们之前学过很多查找方法&#xff0c;最…

R语言贝叶斯分层、层次(Hierarchical Bayesian)模型房价数据空间分析

原文链接&#xff1a;https://tecdat.cn/?p38077 本文主要探讨了贝叶斯分层模型在分析区域数据方面的应用&#xff0c;以房价数据为例&#xff0c;详细阐述了如何帮助客户利用R进行模型拟合、分析及结果解读&#xff0c;展示了该方法在处理空间相关数据时的灵活性和有效性。&a…

拉取git代码不适用ssh,使用用户名及密码

最近换了新电脑&#xff0c;拉取git代码&#xff0c;提示我需要配置ssh&#xff0c;但是着实是有点麻烦了&#xff0c;所以使用用户名和密码的方式可以直接拉取 首先登陆git后找到对应项目地址&#xff0c;有ssh 和http。但是这两种都不是我们要用的地址&#xff0c;使用用户名…

第三十一章 Vue之路由(VueRouter)

目录 一、引言 1.1. 路由介绍 二、VueRouter 三、VueRouter的使用 3.1. 使用步骤&#xff08;52&#xff09; 3.2. 完整代码 3.2.1. main.js 3.2.2. App.vue 3.2.3. Friend.vue 3.2.4. My.vue 3.2.5. Find.vue 一、引言 1.1. 路由介绍 Vue中路由就是路径和组件的映…

Windows转Mac过渡指南

最近由于工作原因开始使用mac电脑&#xff0c;说实话刚拿到手的时候&#xff0c;window党表示真的用不惯。坚持用一下午之后&#xff0c;发现真的yyds&#xff0c;这篇文章说说mac电脑的基本入门指南。 1. 不会使用mac的触摸板&#xff0c;接上鼠标发现滚轮和windows是反的。 …

408——计算机网络(持续更新)

文章目录 一、计算机网络概述1.1 计算机网络的概念1.2 计算机网络体系结构1.3 总结 二、物理层2.1 物理层的基本概念2.2 物理层的基本通信技术2.3 总结 一、计算机网络概述 1.1 计算机网络的概念 计算机网络的定义&#xff1a;将地理位置不同的具有独立功能的计算机通过网络线路…