前端性能优化二十一:静态文件打包方案

1. 打包方案落地:

. 公共组件拆分:a. 业务中有N个js文件,把公用的js文件抽离出来,做成组件.b. 其它文件直接调用这个组件即可.c. 在用户访问时,js文件的大小是比较少的.d. 公用部分在其它页面也不用再加载,直接走cdn文件的缓存即可.. 压缩:JSCSS、图片③. 合并:a. 一个业务页面可能有N个css、js、图片文件.b. 进行js、css文件、图片合并后,可以将多个小文件请求合并为一个大文件请求.c. CSS Sprite④. 服务端处理方案:a. Combo:(1). js、css文件Combo,http://cdn.com/??a.js,b.js(2). 服务端会自动把a.js和b.js合成,可以减少开发成本.

2. 静态文件版本号更新策略?

. 缓存更新:a. 把一个文件放到cdn上之后,每个文件都有缓存时间.b. 一般进入cdn后台、nginx后台刷新文件路径,后台的shell脚本就会更新对应文件header头中缓存配置信息.c. 等这个缓存时间过了后,用户本地就会请求到最新文件内容.d. 问题是如果上线的项目、bug,用户看到的还是旧的.. 版本号:a. 在文件后面加一个版本号用于区分:(1). 文件name.v1-v100.jsb. 按功能区分:(1). 大功能迭代每次新增一个大版本,如由v1到v2(2). 小功能迭代新增加0.0.1或者0.1.0,如从v1.0.0至v1.0.1c. 在迭代过程中,线上可能会有多个版本存在,可以在一个时间点通过nginx统一配置所有版本至最新版.. 静态文件版本号更新策略:a. 时间戳格式:(1). 时间戳.文件name.js(2). 以每次上线时间点做差异.(3). 如果是将文件夹以时间戳命名,有些不需要改变的文件,也会重新加载一次.b. 文件hash格式:(1). 文件hash.文件name.js(2). 以文件内容hash值做key,每次上线文件路径不一致. => 如果文件内容变更,hash就会变.

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

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

相关文章

Python算法例26 落单的数Ⅳ

1. 问题描述 给定数组,除了一个数出现一次外,所有数都出现两次,并且所有出现两次的数都挨着,找出出现一次的数。 2. 问题示例 给出nums[3,3,2,2,4,5,5]&am…

springboot(ssm校园资产管理系统 高校财务管理系统Java系统

springboot(ssm校园资产管理系统 高校财务管理系统Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0)…

sql server多表查询

查询目标 现在有学生表和学生选课信息表,stu和stuSelect,stu中包含学生用户名、名字,stuSelect表中包含学生用户名,所选课程名 学生表: nameusername李明Li Ming李华Li Hua 学生选课表: usernameCourse…

ZooKeeper 使用介绍和原理详解

目录 1. 介绍 重要性 应用场景 2. ZooKeeper 架构 服务角色 数据模型 工作原理 3. 安装和配置 下载 ZooKeeper 安装和配置 启动 ZooKeeper 验证和管理 停止和关闭 4. ZooKeeper 数据模型 数据结构和层次命名空间: 节点类型和 Watcher 机制&#xff…

基于python的excel检查和读写软件

软件版本:python3.6 窗口和界面gui代码: class mygui:def _init_(self):passdef run(self):root Tkinter.Tk()root.title(ExcelRun)max_w, max_h root.maxsize()root.geometry(f500x500{int((max_w - 500) / 2)}{int((max_h - 300) / 2)}) # 居中显示…

每日一题(LeetCode)----栈和队列--滑动窗口最大值

每日一题(LeetCode)----栈和队列–滑动窗口最大值 1.题目(239. 滑动窗口最大值) 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 …

【MySQL】MySQL的数据类型

MySQL的数据类型 一、数据类型分类二、数值类型1、整数类型2、bit类型3、小数类型 三、字符串类型四、时间日期类型五、enum和set类型enum和set查找 数据类型的作用: 决定了存储数据时应该开辟的空间大小和数据的取值范围。决定了如何识别一个特定的二进制序列。 …

AI创作系统ChatGPT系统源码,支持Midjourney绘画,GPT语音对话+DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

R语言基础 | 安徽某高校《统计建模与R软件》期末复习

第一节 数字、字符与向量 1.1 向量的赋值 c<-(1,2,3,4,5) 1.2 向量的运算 对于向量&#xff0c;我们可以直接对其作加&#xff08;&#xff09;&#xff0c;减&#xff08;-&#xff09;&#xff0c;乘&#xff08;*&#xff09;&#xff0c;除&#xff08;/&#xff09…

[网络安全] 端口号 持续更新中.......

netstat -an 查看所有端口号 常见端口: FTP(文件传输协议) : 20数据, 21(控制) SSH (远程连接服务) :22 telnet(远程登录): 23 SMTP (简单邮件传输服务) : 25 DNS (域名系统): 53 DHCP (动态主机配置协议) : 67服务器 ,68客户机 TFTP(小文件传输协议): 69 HTTP(…

【shell脚本实战学习笔记】#1

shell脚本实战学习笔记#1 脚本编写场景需求&#xff1a; 编写一个比较数据大小的shell脚本&#xff0c;要求判断用户只能输入两位数字&#xff0c;不能是字符或其他特殊字符&#xff1b;并且在shell脚本中需要用到函数来控制执行顺序。 知识点&#xff1a;shell函数&#xff…

Semaphone应用源码分析(二)

3.3.3 Semaphore公平实现 公平与非公平只是差了一个方法的实现tryAcquireShared实现 这个方法的实现中&#xff0c;如果是公平实现&#xff0c;需要先查看AQS中排队的情况 // 信号量公平实现 protected int tryAcquireShared(int acquires) { // 死循环。 for (;;) { // 公平…

paddle 55 使用Paddle Inference部署嵌入nms的PPYoloe模型(端到端fps达到52.63)

Paddle Inference 是飞桨的原生推理库,提供服务器端的高性能推理能力。由于 Paddle Inference 能力直接基于飞桨的训练算子,因此它支持飞桨训练出的所有模型的推理。paddle平台训练出的模型转换为静态图时可以选用Paddle Inference的框架进行推理,博主以前都是将静态图转换为…

科研学习|论文解读——面向电商内容安全风险管控的协同过滤推荐算法研究

【论文完整内容详见知网链接】&#xff1a; 面向电商内容安全风险管控的协同过滤推荐算法研究 - 中国知网 (cnki.net) 面向电商内容安全风险管控的协同过滤推荐算法研究* 摘 要&#xff1a;[目的/意义]随着电商平台商家入驻要求降低以及商品上线审核流程简化&#xff0c;内容安…

Centos安装vsftpd:centos配置vsftpd,ftp报200和227错误

一、centos下载安装vsftpd&#xff08;root权限&#xff09; 1、下载安装 yum -y install vsftpd 2、vsftpd的配置文件 /etc/vsftpd.conf 3、备份原来的配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup 4、修改配置文件如下&#xff1a;vi /etc/vsftpd.conf …

go从0到1项目实战体系十三:全局/局部变量

1. 全局/局部变量: ①. 全局变量:a. C和Go语言中,定义在函数外面的就是全局变量.②. 局部变量:a. C和Go语言中,写在{}中、函数中、函数的形参,就是局部变量.b. 只能在{}里面有效.2. 作用域: ①. 全局变量:a. C语言中,全局变量的作用域是从定义的那一行开始,直到文件末尾为止.…

体验一下 CodeGPT 插件

体验一下 CodeGPT 插件 0. 背景1. CodeGPT 插件安装2. CodeGPT 插件基本配置3. (可选)CodeGPT 插件预制提示词原始配置(英文)4. CodeGPT 插件预制提示词配置(中文)5. 简单验证一下 0. 背景 看到B站Up主 “wwwzhouhui” 一个关于 CodeGPT 的视频&#xff0c;感觉挺有意思&#…

SpringMVC:整合 SSM 中篇

文章目录 SpringMVC - 04整合 SSM 中篇一、优化二、总结三、说明注意&#xff1a; SpringMVC - 04 整合 SSM 中篇 一、优化 在 spring-dao.xml 中配置 dao 接口扫描&#xff0c;可以动态地实现 dao 接口注入到 Spring 容器中。 优化前&#xff1a;手动创建 SqlSessionTempl…

HarmonyOS和OpenHarmony的区别

1.概要 众所周知&#xff0c;鸿蒙是华为开发的一款分布式操作系统。因为开发系统&#xff0c;最重要的是集思广益&#xff0c;大家共同维护。为了在IOS和Android之间生存&#xff0c;鸿蒙的茁壮成长一定是需要开源&#xff0c;各方助力才能实现。   在这种思想上&#xff0c;…

STM32实现三个小灯亮

led.c #include"led.h"void Led_Init(void) {GPIO_InitTypeDef GPIO_VALUE; //???RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOC,ENABLE);//???GPIO_VALUE.GPIO_ModeGPIO_Mode_Out_PP;//???? ????GPIO_VALUE.GPIO_PinGPIO_Pin_1|GPIO_Pin_2|GPIO_P…