前端优化之代码压缩gzip

news2024/10/4 22:48:31

这里的代码压缩不是指的vite当中的build.minify的那个选项,而是指的是gzip这样的压缩方式。前者指的是格式上的压缩,也就是把src代码之中的空格、格式之类的全部去除掉。后者指的则是服务器对代码的一种压缩方式。

一、简要说一说服务器端对代码的压缩

Gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩,说是压缩,实际上可以看成是一种编码方式,只要编码后形成的字符少了,解码后能保真,那这就一种较好的代码压缩方式,当然这只是我一个半路出家的门外汉的理解,具体的编码解码内容可以自行百度。

因为这种压缩方式能减少文件体积,也就是能节约带宽,提高速度,所以主流浏览器都是早早支持的,比如我随便打开一个网页的请求

我们可以看到请求头上都有accept-encoding:gzip,deflate,br这样的内容,这就告诉服务器我们这个浏览器是支持gzip文件的,你传过来吧,我们可以解压缩。

二、前端为什么要搞这个压缩

主要是服务器每次压缩都要耗cpu,不如提前压缩好,让服务器直接有gzip文件就传该文件,省了服务器一道步骤

三、前端实现

主要是使用'vite-plugin-compression2'这个插件,下载之后在vite配置文件中使用

import { compression } from 'vite-plugin-compression2'

plugins:[
compression({
      include:/\.(js|mjs|json|css|html)$/i,
      deleteOriginalAssets:false,
      skipIfLargerOrEqual:true,
    })
]

当然这个配置是简写的,主要是在vite配置对象的plugins部分配置,具体配置可以看该插件的官网。

我们来看一下打包之后的结果

可以看到根据配置,对js、css、html文件都形成了对应的gz文件,而且文件大小都小了一些。 

四、一些小问题

本来搞完想在nginx上试试看的,但是老报错,我得再去琢磨一下子。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Go语言编写自定义的HTTP代理:探险网络奇幻之旅

你是否曾经想过自己也能编写一个代理服务器,掌握网络冲浪的主动权?现在,有了Go语言,这个梦想不再遥不可及!让我们一起踏上这段探险之旅,用Go语言编写一个自定义的HTTP代理,开启网络奇幻之旅&…

两个角度解决msvcr120.dll丢失的问题,修复msvcr120.dll丢失

msvcr120.dll 是 Microsoft Visual Studio 2013 的一部分,它属于 Visual C Redistributable Packages 的一个组件。在使用电脑的过程中是否遇到过msvcr120.dll 丢失的情况,约到这样的问题,大家是怎么解决的?今天教大家从两个角度去…

【操作系统】实验九 写一个设备驱动程序

🕺作者: 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注:👍点赞🙌收藏✍️留言 🏇码字不易,你的👍点赞🙌收藏❤️关注对我真的很重要&…

etcd未授权到控制k8s集群

在安装完 K8s 后,默认会安装 etcd 组件,etcd 是一个高可用的 key-value 数据库,它为 k8s 集群提供底层数据存储,保存了整个集群的状态。大多数情形下,数据库中的内容没有加密,因此如果黑客拿下 etcd&#x…

数字地球开放平台农作物长势监测解决方案

数字地球开放平台农作物长势监测解决方案 利用遥感技术进行产量预测是一种高效而准确的方法,通过监测植被的生长状况、土地利用、气象等因素,可以为农业决策提供有力支持。数字地球开放平台拥有200颗卫星,为您提供一站式卫星遥感服务。 农情监…

Java工程师的你,真的不想了解一下《Java内存区域详解》吗?(重点)

Java工程师的你,真的不想了解一下《Java内存区域详解》吗?(重点) 文章目录 Java工程师的你,真的不想了解一下《Java内存区域详解》吗?(重点)前言运行时数据区域程序计数器Java 虚拟机…

【Unity3D日常开发】Unity3D中设置Text行首不出现标点符号

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 在开发中会遇到Text的文本内容行首出现标点符号的情况&#xf…

智云影院CMS程序PHP源码, 无需数据库,附带搭建教程

源码介绍 本程序无需数据库,直接上传源码即可访问,(服务器或虚拟主机空间)都可以搭建使用!模板自适应端,浏览体验更佳!安装操作简单!无需繁琐的操作,即可快速拥有一个视…

HCIA学习作业二

要求:基于192.168.1.0/24进行合理划分,要求全网通 [AR3]display ip interface brief [AR3]display ip routing-table [AR1]display ip interface brief [AR1]display ip routing-table [AR2]display ip interface brief [AR2]display ip routing-tab…

解决WinForms跨线程操作控件的问题

解决WinForms跨线程操作控件的问题 介绍 在构建Windows窗体应用程序时,我们通常会遇到需要从非UI线程更新UI元素的场景。由于WinForms控件并不是线程安全的,直接这样做会抛出一个异常:“控件’control name’是从其他线程创建的,…

数字图像处理(实践篇)三十一 Raw图像数据转为RGB图像实践

目录 1 Raw图像和RGB图像 2 Raw图像的排布方式 3 方案 4 实践 5 其他 1 Raw图像和RGB图像 Raw图片是未经压缩的,没有任何数据损失,Raw图片保留了从图像传感器捕获的每个像素的原始信息,因此可以实现更高的图像质量。

easypoi导出Word中,表格分页时上边框丢失

问题具体描述: 使用easypoi导出的Word中包含一个表格,表格行数较多,需要分页显示,在分页后第一行的上边框部分丢失,显示不美观,具体如下: 解决: 对表格中每行都添加一个上边框,具体如下: XWPFDocument do…

机器学习 | 深入探索Numpy的高性能计算能力

目录 初识numpy numpy基本操作 数组的基本操作 ndarray运算 数组间运算 矩阵 初识numpy Numpy(Numerical Python)是一个开源的Python科学计算库,用于快速处理任意维度的数组。Numpy支持常见的数组和矩阵操作。对于同样的数值计算任务&…

万字干货教你如何保证业务数据全流程安全

云布道师 引言:本文内容整理自【弹性计算技术公开课——ECS 安全季】中阿里云弹性计算技术专家陈怀可带来的课程《如何保证业务数据的全流程安全》。 数据安全的基本概念 首先,来看一下数据安全的基本概念。 用户的云上数据安全是用户的生命线&#x…

HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog)

自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。 在应用的使用和开发中,弹窗是一个很常见的场景,自定义弹窗…

PyTorch 添加 C++ 拓展

参考内容:pytorch添加C拓展简单实战编写及基本功能测试 文章目录 第一步:编写 C 模块test.htest.cpp 第二步:编写 setup.py第三步:安装 C 模块第四步:验证安装第五步:C 模块使用test_cpp1.pytest_cpp2.py 运…

如何使用preact开始一个前端项目?

本篇文章对于preact不做过深介绍,仅仅介绍其基础的使用方法。使用Preact,我们可以通过组装组件和元素的树来创建用户界面。组件是返回其树应该输出的内容的描述的函数或类。这些描述通常是用JSX(如下所示)或HTML编写的&#xff0c…

CSS之粘性定位

让我为大家介绍一下粘性定位吧&#xff01; 大家应该都了解过绝对定位&#xff0c;它是相对于父级定位 那么粘性定位相对于谁呢&#xff1f; 它相对于overflow:hidden; 如果没找到就会跟fixed固定定位一样&#xff0c;相对于视口 <!DOCTYPE html> <html lang"en…

地图在游戏中的应用案例:王者荣耀

腾讯位置服务&#xff0c;作为国内地图导航的领头羊&#xff0c;在各行业中应用广泛&#xff0c;包括&#xff1a;网约车、智能物流、车用地图、智能穿戴、智能景区、运输安全监控、金融地图、运动健康、房产服务、智慧交通、时空大数据慧眼、专网地图等等。 腾讯地图与其他竞…

视频监控方案设计:EasyCVR视频智能监管系统方案技术特点与应用

随着科技的发展&#xff0c;视频监控平台在各个领域的应用越来越广泛。然而&#xff0c;当前的视频监控平台仍存在一些问题&#xff0c;如视频质量不高、监控范围有限、智能化程度不够等。这些问题不仅影响了监控效果&#xff0c;也制约了视频监控平台的发展。 为了解决这些问…