常规VUE项目优化实践，跟着做就对了！
总结：
主要优化方式：
- imagemin优化打包大小（96M->50M），但是以打包速度为代价，通过在构建过程中压缩图片来实现，可根据需求开启。
- 字体压缩：目前项目内引用为思源字体，打包为24M。实践通过压缩字体会导致丢失一些属性，而字蛛等插件压缩只支持静态资源，对服务端获取的数据无法完美匹配。
目前解决方案，仅用SourceHanSansSC-Medium字体，舍弃Normal及Regular字体。 - Gzip前端（50M->46M）针对css,js等代码进行压缩。
- Gzip服务端（通过nginx.conf的镜像文件实现前端配置）
- 本地构建速度(134s->67s)：通过引入CDN和Echarts按需加载方式提升本地构建速度，目前已接近优化的极限，因为目前项目基本框架为vben-admin（官网并不推荐，后期为更换为vben-admin-thin，官网纯净版代码打包速度为122s）
仍需优化：
- 服务端用pnpm（官网推荐，下载，打包速度更快）
- 删除框架内无用的组件（可更换为vben-admin-thin一劳永逸)
以下为详情过程~
dev环境现况：
● LCP (Largest Contentful Paint) 代表的是视窗最大可见图片或者文本块的渲染时间。一般是至少75%用户能够在2.5秒内。
● 项目打包为将近97M
● 本地构建速度约134s。
具体步骤：
1、安装 rollup-plugin-visualizer 插件，此插件可以展示构建时长、chunk 数量及大小，目前可以分析为项目内最大占比为静态资源。
2、通过imagemin插件压缩图片并删除无用图上，压缩后的体积减少到50M
3、gzip前端代码压缩
4、cdn引入的vue, vue-router ,ant-design-vue
5、按需加载echarts
现况：
● 打包后的体积为46M
● 可以看到目前最大的模块不再是静态资源 而是echarts等外部资源库
● 同样以我本地为测试环境，打包速度优化至65s
● 优化后的首屏加载速度为2s内
相关文章：
常规VUE项目优化实践，跟着做就对了！
总结： 主要优化方式： imagemin优化打包大小（96M->50M），但是以打包速度为代价，通过在构建过程中压缩图片来实现，可根据需求开启。字体压缩：目前项目内引用为思源字体，…...
PLL 的 verilog 实现
锁相环（PLL）是一种常用的频率、相位追踪算法，在信号解调、交流并网等领域有着广泛的应用。本文对全数字锁相环的原理进行介绍，随后给出 verilog 实现及仿真。 PLL 锁相原理 锁相环结构如下图所示，主要由鉴相器、环路滤…...
【Hystrix技术指南】（1）基本使用和配置说明
这世间许多事物皆因相信而存在，所以人们亲手捏出了泥菩萨，却选择坚定的去信仰它。 分布式系统的规模和复杂度不断增加，随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中，【熔断、隔离、降级、限流】是经常被…...
)
Oracle EBS OM客制化调用API创建销售订单非常慢(FND_FLEX_HASH死锁)
业务场景 由于Oracle EBS标准功的公司间关联交易操作涉及业务节点环节多，需要多个业务部门参考操作完成，浪费人力和花费时间。随着国内集团公司通过业务整合优化，大幅度减少间中很多环节的人为操作，如国内公司间贸易通过类似于客制化出货单申请方式，跨国公司间贸易通过类似…...
【leetcode】394. 字符串解码
题目链接：力扣 给定一个经过编码的字符串，返回它解码后的字符串。 编码规则为: k[encoded_string]，表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效的；输入字符串中没…...
系统架构设计高级技能 · 系统质量属性与架构评估（二）【系统架构设计师】
系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA（一）【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估（二）【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...
魅族Pandaer手机壳
Pandaer的设计真是非常好看啊！像是手机壳的花样就特别多，还分出来很多系列，我比较喜欢它的亮面设计，入手了一款iPhone的，花色叫做“失控街头”，壳内部也是亮的，看起来特别浮夸，潮里潮…...
F5洞察2023年网络威胁，助力网络安全防护
2023已经过半，关于网络安全防护的相关讨论话题热度始终居高不下。对于网络安全领域的从业者来说，应当对相关的前瞻分析有所了解。前段时间，我阅读了F5 安全运营中心工程师对威胁网络安全的预测，深受启发，故此选取了几则…...
从零构建深度学习推理框架-4 框架中的算子注册机制
今天要讲的这一注册机制用到了设计模式中的工厂模式和单例模式，所以这节课也是对两大设计模式的一个合理应用和实践。KuiperInfer的注册表是一个map数据结构，维护了一组键值对，key是对应的OpType，用来查找对应的value，…...
使用vscode+ssh免密远程Linux
使用vscodessh免密远程Linux 使用 SSH 密钥对：使用 SSH Agent：ssh-agent的使用场景 使用 SSH 密钥对： 确保你的本地机器上已经生成了 SSH 密钥对。如果没有，请使用以下命令生成密钥对： ssh-keygen -t rsa这将在 ~/.ssh…...
rust-异步学习
rust获取future中的结果 两种主要的方法使用 async: async fn 和 async 块 async 体以及其他 future 类型是惰性的：除非它们运行起来，否则它们什么都不做。 运行 Future 最常见的方法是 .await 它。 当 .await 在 Future 上调用时，它会尝试把…...
【Azure】office365邮箱测试的邮箱账号因频繁连接邮箱服务器而被限制连接 引起邮箱显示异常
azure微软office365邮箱会对频繁连接自身邮箱服务器的IP地址进行，连接邮箱服务器IP限制，也就是黑名单，释放时间不确定，但至少一天及以上。 解决办法，换一个IP，或者新注册一个office365邮箱再重试。 以下是…...
重新登录成功和登录失败处理器
<template><div class="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"><h3 class="title">Java1234 Vue3 后台管理系统</h3><el…...
【Spring】（三）Spring 使用注解存储和读取 Bean对象
文章目录 前言一、使用注解储存 Bean 对象1.1 配置扫描路径1.2 类注解储存 Bean 对象1.2.1 Controller（控制器存储）1.2.2 Service（服务储存）1.2.3 Repository（仓库存储）1.2.4 Component（组件储存…...
ParallelCollectionRDD [0] isEmpty at KyuubiSparkUtil.scala:48问题解决
ParallelCollectionRDD [0] isEmpty at KyuubiSparkUtil.scala:48问题解决 这个问题出现在使用Kyubi Spark Util处理ParallelCollectionRDD的过程中，具体是在KyubiSparkUtil.scala文件的第48行调用isEmpty方法时出现的。该问题可能是由以下几个原因引起的࿱…...
---------------- 部署 Zookeeper 集群 ----------------
部署 Zookeeper 集群 1.安装前准备2.安装 Zookeeper修改配置文件在每个节点上创建数据目录和日志目录在每个节点的dataDir指定的目录下创建一个 myid 的文件配置 Zookeeper 启动脚本 //准备 3 台服务器做 Zookeeper 集群 192.168.109.1 192.168.109.2 192.168.109.3 1.安装前准…...
SpringBoot 依赖管理和自动配置---带你了解什么是版本仲裁
😀前言 本篇博文是关于SpringBoot 依赖管理和自动配置，希望能够帮助到您😊 🏠个人主页：晨犀主页 🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您…...
c语言每日一练(2)
前言： 每日一练系列，每一期都包含5道选择题，2道编程题，博主会尽可能详细地进行讲解，令初学者也能听的清晰。每日一练系列会持续更新，暑假时三天之内必有一更，到了开学之后，将看学业情…...
代码随想录第三十七天
代码随想录第三十七天 Leetcode 738. 单调递增的数字 Leetcode 738. 单调递增的数字 题目链接: 单调递增的数字 自己的思路:完全想不到！！ 正确思路:大致思路是从后向前遍历，不可以从前向后，如果从前向后没有保证单调递增的顺序&…...
Linux进程间通信--ftok
在C语言中，ftok函数用于生成一个唯一的键值，该键值通常用于创建共享内存，消息队列和信号量等系统资源的标识符。 ftok函数原型入下： key_t ftok(const char *pathname, int proj_id); 参数说明： pathname：…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...