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

常规VUE项目优化实践，跟着做就对了！

news 2026/2/9 20:57:19

总结：

主要优化方式：

  1. imagemin优化打包大小（96M->50M），但是以打包速度为代价，通过在构建过程中压缩图片来实现，可根据需求开启。
  2. 字体压缩：目前项目内引用为思源字体，打包为24M。实践通过压缩字体会导致丢失一些属性，而字蛛等插件压缩只支持静态资源，对服务端获取的数据无法完美匹配。
    目前解决方案，仅用SourceHanSansSC-Medium字体，舍弃Normal及Regular字体。
  3. Gzip前端（50M->46M）针对css,js等代码进行压缩。
  4. Gzip服务端（通过nginx.conf的镜像文件实现前端配置）
  5. 本地构建速度(134s->67s)：通过引入CDN和Echarts按需加载方式提升本地构建速度，目前已接近优化的极限，因为目前项目基本框架为vben-admin（官网并不推荐，后期为更换为vben-admin-thin，官网纯净版代码打包速度为122s）

仍需优化：

  1. 服务端用pnpm（官网推荐，下载，打包速度更快）
  2. 删除框架内无用的组件（可更换为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），但是以打包速度为代价，通过在构建过程中压缩图片来实现，可根据需求开启。字体压缩：目前项目内引用为思源字体&#xff0c…...

编程日记 2023/8/7 23:21:31

PLL 的 verilog 实现

锁相环（PLL）是一种常用的频率、相位追踪算法，在信号解调、交流并网等领域有着广泛的应用。本文对全数字锁相环的原理进行介绍，随后给出 verilog 实现及仿真。 PLL 锁相原理 锁相环结构如下图所示，主要由鉴相器、环路滤…...

编程日记 2023/8/7 23:20:30

【Hystrix技术指南】（1）基本使用和配置说明

这世间许多事物皆因相信而存在，所以人们亲手捏出了泥菩萨，却选择坚定的去信仰它。 分布式系统的规模和复杂度不断增加，随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中，【熔断、隔离、降级、限流】是经常被…...

编程日记 2023/8/7 23:19:29

Oracle EBS OM客制化调用API创建销售订单非常慢(FND_FLEX_HASH死锁)

业务场景 由于Oracle EBS标准功的公司间关联交易操作涉及业务节点环节多，需要多个业务部门参考操作完成，浪费人力和花费时间。随着国内集团公司通过业务整合优化，大幅度减少间中很多环节的人为操作，如国内公司间贸易通过类似于客制化出货单申请方式，跨国公司间贸易通过类似…...

编程日记 2023/8/7 23:18:28

【leetcode】394. 字符串解码

题目链接：力扣 给定一个经过编码的字符串，返回它解码后的字符串。 编码规则为: k[encoded_string]，表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效的；输入字符串中没…...

编程日记 2023/8/7 23:17:27

系统架构设计高级技能 · 系统质量属性与架构评估（二）【系统架构设计师】

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA（一）【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估（二）【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...

编程日记 2023/8/7 23:16:26

魅族Pandaer手机壳

Pandaer的设计真是非常好看啊！像是手机壳的花样就特别多，还分出来很多系列，我比较喜欢它的亮面设计，入手了一款iPhone的，花色叫做“失控街头”，壳内部也是亮的，看起来特别浮夸，潮里潮…...

编程日记 2023/8/7 23:15:24

F5洞察2023年网络威胁，助力网络安全防护

2023已经过半，关于网络安全防护的相关讨论话题热度始终居高不下。对于网络安全领域的从业者来说，应当对相关的前瞻分析有所了解。前段时间，我阅读了F5 安全运营中心工程师对威胁网络安全的预测，深受启发，故此选取了几则…...

编程日记 2023/8/7 23:14:22

从零构建深度学习推理框架-4 框架中的算子注册机制

今天要讲的这一注册机制用到了设计模式中的工厂模式和单例模式，所以这节课也是对两大设计模式的一个合理应用和实践。KuiperInfer的注册表是一个map数据结构，维护了一组键值对，key是对应的OpType，用来查找对应的value，…...

编程日记 2023/8/7 23:13:20

使用vscode+ssh免密远程Linux

使用vscodessh免密远程Linux 使用 SSH 密钥对：使用 SSH Agent：ssh-agent的使用场景 使用 SSH 密钥对： 确保你的本地机器上已经生成了 SSH 密钥对。如果没有，请使用以下命令生成密钥对： ssh-keygen -t rsa这将在 ~/.ssh…...

编程日记 2023/8/7 23:12:20

rust-异步学习

rust获取future中的结果 两种主要的方法使用 async: async fn 和 async 块 async 体以及其他 future 类型是惰性的：除非它们运行起来，否则它们什么都不做。 运行 Future 最常见的方法是 .await 它。 当 .await 在 Future 上调用时，它会尝试把…...

编程日记 2023/8/7 23:11:18

【Azure】office365邮箱测试的邮箱账号因频繁连接邮箱服务器而被限制连接 引起邮箱显示异常

azure微软office365邮箱会对频繁连接自身邮箱服务器的IP地址进行，连接邮箱服务器IP限制，也就是黑名单，释放时间不确定，但至少一天及以上。 解决办法，换一个IP，或者新注册一个office365邮箱再重试。 以下是…...

编程日记 2023/8/7 23:10:16

重新登录成功和登录失败处理器

<template><div class="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"><h3 class="title">Java1234 Vue3 后台管理系统</h3><el…...

编程日记 2023/8/7 23:09:15

【Spring】（三）Spring 使用注解存储和读取 Bean对象

文章目录 前言一、使用注解储存 Bean 对象1.1 配置扫描路径1.2 类注解储存 Bean 对象1.2.1 Controller&#xff08;控制器存储&#xff09;1.2.2 Service&#xff08;服务储存&#xff09;1.2.3 Repository&#xff08;仓库存储&#xff09;1.2.4 Component&#xff08;组件储存…...

编程日记 2023/8/7 23:08:12

ParallelCollectionRDD [0] isEmpty at KyuubiSparkUtil.scala:48问题解决

ParallelCollectionRDD [0] isEmpty at KyuubiSparkUtil.scala:48问题解决 这个问题出现在使用Kyubi Spark Util处理ParallelCollectionRDD的过程中&#xff0c;具体是在KyubiSparkUtil.scala文件的第48行调用isEmpty方法时出现的。该问题可能是由以下几个原因引起的&#xff1…...

编程日记 2023/8/7 23:07:11

---------------- 部署 Zookeeper 集群 ----------------

部署 Zookeeper 集群 1.安装前准备2.安装 Zookeeper修改配置文件在每个节点上创建数据目录和日志目录在每个节点的dataDir指定的目录下创建一个 myid 的文件配置 Zookeeper 启动脚本 //准备 3 台服务器做 Zookeeper 集群 192.168.109.1 192.168.109.2 192.168.109.3 1.安装前准…...

编程日记 2023/8/7 23:06:10

SpringBoot 依赖管理和自动配置---带你了解什么是版本仲裁

&#x1f600;前言 本篇博文是关于SpringBoot 依赖管理和自动配置&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您…...

编程日记 2023/8/7 23:05:08

c语言每日一练(2)

前言&#xff1a; 每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;暑假时三天之内必有一更&#xff0c;到了开学之后&#xff0c;将看学业情…...

编程日记 2023/8/7 23:04:07

代码随想录第三十七天

代码随想录第三十七天 Leetcode 738. 单调递增的数字 Leetcode 738. 单调递增的数字 题目链接: 单调递增的数字 自己的思路:完全想不到&#xff01;&#xff01; 正确思路:大致思路是从后向前遍历&#xff0c;不可以从前向后&#xff0c;如果从前向后没有保证单调递增的顺序&…...

编程日记 2023/8/7 23:03:06

Linux进程间通信--ftok

在C语言中&#xff0c;ftok函数用于生成一个唯一的键值&#xff0c;该键值通常用于创建共享内存&#xff0c;消息队列和信号量等系统资源的标识符。 ftok函数原型入下&#xff1a; key_t ftok(const char *pathname, int proj_id); 参数说明&#xff1a; pathname&#xff1a…...

编程日记 2023/8/7 23:02:05

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2026/1/25 9:33:23

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/11/7 10:02:17

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2026/2/6 6:05:52

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2026/1/29 5:50:06

Java中HashMap底层原理深度解析：从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

编程新知 2026/2/9 20:17:32