当前位置: 首页 > news >正文

前端开启gzip优化页面加载速度

生成gizp的打包资源,可以优化页面加载速度

打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持

1、前端配置compression-webpack-plugin

先安装:npm install compression-webpack-plugin
安装的版本需要注意,根据自己的webpack版本来定,尽量匹配

01、vue.config.js 在vuecli中

/* 第一种方式 */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const plugins = [...]
if (isProduction) {plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件}))
}
module.exports = {configureWebpack: {resolve: {alias: {'@': resolve('./src')}},plugins},
}

02、 在vuecli中,configureWebpack 返回函数式写法

/* 第二种方式 */
// configureWebpack 返回函数式写法
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV !== 'development'
module.exports = {
...
configureWebpack: (config) => {config.plugins.push(new HardSourcePlugin())// 其他配置Object.assign(config.resolve, {alias: {'@': resolve('./src')}})// 为生产环境修改配置if (isProduction) {config.plugins.push(new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件}))}},}// webpack.config.js  在webpack搭建的项目中
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {mode: 'development',...plugins: [new CompressionWebpackPlugin({filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\.(' + ['html', 'js', 'css'].join('|') + ')$'),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件})]

2、服务端配置, 以nginx为例

服务端 Nginx 需开启 gzip_static 功能;
在nginx.conf的server模块中加入以下代码:

server{//开启和关闭gzip模式gzip on;//gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。gzip_min_length 2k;// 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 gzip_buffers 4 16k;// 设置gzip压缩针对的HTTP协议版本gzip_http_version 1.0;// gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间gzip_comp_level 2;//进行压缩的文件类型gzip_types text/plain application/javascript text/css application/xml;// 是否在http header中添加Vary: Accept-Encoding,建议开启gzip_vary on;
}

以上
对于支持gzip的浏览器, 配置成功后请求头中会包含: Accept-Encoding: gzip, deflate
服务器响应时 在响应头中显示: Content-Encoding: gzip

相关文章:

前端开启gzip优化页面加载速度

生成gizp的打包资源,可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin 先安装:npm install compres…...

用Java写一个俄罗斯方块

目录 游戏规则 小方块类:Cell 七种图形类:I、J、L、O、S、T、Z J L O S T Z 俄罗斯方块游戏主类:Tetris 效果展示 游戏规则 由小方块组成的不同形状的板块陆续从屏幕上方落下来,玩家通过调整板块的位置和方向,使它…...

应用于智慧金融的AI边缘计算盒子+AI算法软硬一体化方案

传统金融营业厅存在运营管理模式落后、资源投放不平衡、从业人员培训效果不达预期、客户体验割裂等普遍现象; 部署英码数字金融解决方案,将助力企业从传统金融模式快速向数字金融模式转变,可针对每一个客户定制个性化“一对一”服务&#xff…...

目标检测——Faster R-CNN算法解读

论文:Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 作者:Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun 链接:https://arxiv.org/abs/1506.01497 代码:https://github.com/rbgirsh…...

Wireshark (一)安装入门 —— 软件介绍

文章目录 Wireshark是什么?为什么要使用Wireshark?相关网络分析工具软件对比 Wireshark是什么? Wireshark是一种开源网络协议分析器,它可以捕获和分析网络中传输的数据包。 用户可以使用Wireshark来诊断网络问题、了解网络协议的…...

Web框架与Django路由层

Web框架 一 web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法。web框架已经实现了很多功能&…...

什么是CAS, 什么是AQS

文章目录 什么是CAS, 什么是AQSCASAQS 什么是CAS, 什么是AQS CAS AQS AQS 全称是AbstractQueuedSynchronizer, 是juc 下一个核心的抽象类,用于构建各种同步器和锁 比如我们熟悉的 ReentrantLock、ReadWriteLock、CountDownLatch等等是基于AQS. 首先在…...

蓝桥杯每日一题2023.12.1

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题目而言思路较为重要&#xff0c;实际可以转化为求两个数字对应的操作&#xff0c;输出最前面的数字即可 #include<bits/stdc.h> using namespace std; int main() {for(int i 1…...

正则表达式从放弃到入门(1):“正则表达式”是什么?

正则表达式从放弃到入门&#xff08;1&#xff09;&#xff1a;“正则表达式”是什么&#xff1f; 本博文转载自 这是一篇”正则表达式”扫盲贴&#xff0c;如果你还不理解什么是正则表达式&#xff0c;看这篇文章就对了。 如果你已经掌握了”正则表达式”&#xff0c;就不用再…...

SQL解惑 - 谜题2

文章目录 一、谜题描述二、分析三、答案四、总结 一、谜题描述 创建一个记录雇员缺勤率的数据库。使用的表结构如下&#xff1a;Absenteeism 主键&#xff1a;PRIMARY KEY (emp_id, absent_date) 字段名字段类型字段中文名字段描述emp_idINTERGER雇员id-absent_dateSTRING缺勤…...

FWT+高维前缀和:Gym - 103202M

https://vj.imken.moe/contest/597216#problem/F 考虑两个人的集合分别为 i , j i,j i,j&#xff0c;那么我们令 f ( i ⊗ j ) f(i\otimes j) f(i⊗j)&#xff0c;其中 f ( s ) f(s) f(s) 表示两个人不同集合恰好为 s s s&#xff0c;显然 f ( s ) f(s) f(s) 可以FWT求…...

【C++】string类的接口综合运用

目录​​​​​​​ 介绍&#xff1a; 一&#xff0c;string对象的构建 二&#xff0c;string类对象的容量操作 介绍&#xff1a; string容器我们之前已经粗略了解了基本增添、修改、删除、插入等基本功能&#xff0c;这里就不再做过多说明&#xff0c;接下来我们全面并详细…...

分布式ID生成框架Leaf升级踩坑

背景&#xff1a; 在项目中需要一个统一的拿单号等唯一ID的服务&#xff0c;就想起了之前用到的leaf&#xff0c;但是因为项目要求&#xff0c;leaf的版本不符合&#xff0c;需要做一些升级 项目地址&#xff1a;https://github.com/Meituan-Dianping/Leaf 升级点&#xff1…...

常用的设计模式

文章目录 常用的设计模式&#xff1a;一、单例模式3、懒汉式 - 懒汉式非线程安全4、饿汉式 - 线程安全5、懒汉式和饿汉式区别6、双重检查锁定7、应用场景 二、工厂模式1、简单工厂模式2、工厂模式3、抽象工厂4、总结 三、代理模式1、静态代理2、动态代理jdk自带动态代理 3、Cgl…...

git的相关实用命令

参看文章&#xff1a;https://blog.csdn.net/qq_21688871/article/details/130158888 http://www.mobiletrain.org/about/BBS/159885.html 1、git commit后&#xff0c;但发现文件有误&#xff0c;不想push(提交到本地库&#xff0c;回退到暂存区&#xff09; git reset --sof…...

【使用`model.status`来获取gurobi求解过程中的模型状态】

在Gurobi中&#xff0c;你可以使用model.status来获取求解过程中的模型状态。可以使用了model.status来检查模型是否找到最优解。模型状态是一个Gurobi的常量&#xff0c;表示了求解过程中的不同状态。 以下是一些常见的模型状态&#xff1a; GRB.OPTIMAL: 最优解被找到。GRB…...

【UGUI】Unity教程:实现物品的拖拽功能

大家好&#xff0c;今天&#xff0c;我们将一起学习如何在Unity中实现物品的拖拽功能。这是一个非常实用的技能&#xff0c;无论你是在制作RPG游戏的背包系统&#xff0c;还是在制作策略游戏的建筑放置功能&#xff0c;都会用到这个技能。那么&#xff0c;让我们开始吧&#xf…...

【奇淫技巧】两数交换

【奇淫技巧】两数交换 临时变量法&#xff1a;借助中间变量加减法&#xff1a;不使用中间变量异或法&#xff1a;不使用中间变量语法糖&#xff1a;某些编程语言支持交换语法糖借助函数&#xff0c;不交换 前提&#xff1a;待交换的两个元素&#xff0c;分别用a,b表示&#xf…...

Java核心知识点整理大全26-笔记

目录 27. Storm 7.1.1. 概念 27.1.1. 集群架构 27.1.1.1. Nimbus&#xff08;master-代码分发给 Supervisor&#xff09; 27.1.1.2. Supervisor&#xff08;slave-管理 Worker 进程的启动和终止&#xff09; 27.1.1.3. Worker&#xff08;具体处理组件逻辑的进程&#xff…...

“上云”还是“下云”?探云计算的下一站未来!

引言 10 月 27 日&#xff0c;X&#xff08;原Twitter&#xff09;工程技术发布帖子称&#xff0c;在过去的一年里&#xff0c;技术团队优化了 X 的云服务使用方式&#xff0c;着手将更多工作负载迁往本地基础设施。这一转变使 X 每月的云成本降低了 60%。所有媒体、Blob 存储均…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...