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

VUE3项目VITE打包优化

news 来源：原创 2025/7/19 9:00:13

VUE3项目VITE打包优化

代码加密
- 依赖
- 配置
- 效果对比图
自动导入
- 依赖
- 配置
代码压缩
- 依赖
- 配置
- 效果对比图
图片压缩
- 依赖
- 配置
- 效果对比图
字体压缩
总结与实践运用
- 效果

代码加密

依赖

npm install -D vite-plugin-bundle-obfuscator

配置

import vitePluginBundleObfuscator from "vite-plugin-bundle-obfuscator";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {return {plugins: [// ...vitePluginBundleObfuscator({autoExcludeNodeModules: true,threadPool: true,}),// ...],};
});

效果对比图

自动导入

通俗理解，就是用的才导入，不用的不导入，这样打包体积才会变小；

依赖

npm install -D unplugin-vue-components unplugin-auto-import

配置

参考资料elementPlus
可以把自动生成的auto-imports.d.ts、components.d.ts文件，放入.gitignore文件中，不然提交。

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {return {plugins: [// ...AutoImport({resolvers: [ElementPlusResolver({ importStyle: "sass" })],imports: ["vue", "vue-router"],}),Components({resolvers: [ElementPlusResolver()],}),// ...],};
});

代码压缩

这个是需要nginx配置的，就算前端配置了，nginx没有配置，也是没有用的。
前端起到是避免nginx调用服务器CPU压缩代码，之后再传递，而是可以直接调取前端静态压缩文件

依赖

npm install -D vite-plugin-compression2

配置

前端打包配置，使用的是gzip算法。
后续尝试brotli压缩算法上线，这个nginx需要引入依赖，以及只支持https。
已测如下图，与gzip对比，brotli算法压缩体检还可以多减少18.76%，但是没有上线。
前端vite配置

import { compression } from "vite-plugin-compression2";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {return {plugins: [// ...compression({// 可以加其他的后缀文件include: [/\.js$/, /\.html$/, /\.css$/, /\.ttf$/],}),// ...],};
});

nginx配置

http {# ....gzip  on; # 开启gzip压缩gzip_static on; # 开启静态文件的gzip压缩，也就是从前端本地提取，而不是nginx调取cpu进行压缩，减小cpu压力。     gzip_min_length 256;# 设置压缩最小字节数gzip_comp_level 6; # 压缩级别，级别越大越好，但是越占用CPU资源，到了级别6后，很难再提高；gzip_types application/javascript text/html text/css image/jpeg image/gif image/png image/svg+xml image/x-icon font/ttf application/octet-stream; # 进行压缩的文件类型gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建议开启gzip_disable "MSIE [1-6]\."; # 禁用IE 6 gzip 此处表示ie6及以下不启用gzip（因为ie低版本不支持）gzip_http_version 1.0; # 设置gzip压缩针对的HTTP协议版本gzip_proxied any; # 设置启用压缩的代理服务器类型# 设置压缩所需要的缓冲区大小 使用默认值# gzip_buffers 32 4k;# ....
}

效果对比图

打包体积下降39.57%，效果很明显

图片压缩

最开始使用的插件是vite-plugin-imagemin，但是在本地可以运行，但是到了服务器上，因为sharp依赖c++库报错，要升级。后面更换了插件。
该插件遇的坑是，服务器是缺少c++命令，百度搜索一下安装即可。然后要记得在重新安装依赖之前，先将之前报错的产生的node_modules文件夹删除掉。

依赖

可以先尝试直接按照依赖，如果不行，再加后面一串国内阿里云镜像依赖包。

npm install -D vite-plugin-minipic --sharp_binary_host="https://registry.npmmirror.com/-/binary/sharp" --sharp_libvips_binary_host="https://registry.npmmirror.com/-/binary/sharp-libvips"

配置

import miniPic from "vite-plugin-minipic";
import { defineConfig } from "vite";
// ...
export default defineConfig(() => {return {plugins: [// ...miniPic(),// ...],};
});

效果对比图

图片体积整体下降72.05%，效果很明显

字体压缩

实现前端.ttf字体包的压缩
压缩率高达90%左右。

总结与实践运用

我相信认真看完，还是有收获的，我自己全流程亲测，断断续续花费了我半个月时间，从设想到一步一步拆解实现，然后在生产环境启用，很有收获。
但是我也相信你们也有疑惑，最后一个字体压缩怎么在生成环境运用？
我的思路是编写shell脚本：（我的思路只是参考，你也许可以想到更好的方案）
- 回滚，去除本地修改部分；
- 通过git获取远端git仓库的代码；
- 通过python调用.py压缩字体文件，将字体进行压缩；
- 通过.env环境打包成前端包；
- 将dist目录移动到nginx代理目录下即可。

效果

文件压缩率高达90%左右响应速率提升高达85%左右
下面图片是一个测试环境、一个是正式环境

VUE3项目VITE打包优化

VUE3项目VITE打包优化代码加密依赖配置效果对比图自动导入依赖配置代码压缩依赖配置效果对比图图片压缩依赖配置效果对比图字体压缩总结与实践运用效果代码加密依赖 npm install -D vite-plugin-bundle-obfuscator配置 import vitePluginBundleObfuscator from "…...

编程日记 2025/7/19 9:00:13

IP 分片重组与 TCP 会话重组

1. IP 分片重组（IP Fragmentation & Reassembly） （1）分片原因当 IP 数据包长度超过 MTU（Maximum Transmission Unit）（如以太网默认 1500 字节）时，路由器或发送端会…...

编程日记 2025/7/19 1:14:13

《Python实战进阶》No34：卷积神经网络（CNN）图像分类实战

第34集：卷积神经网络（CNN）图像分类实战摘要卷积神经网络（CNN）是计算机视觉领域的核心技术，特别擅长处理图像分类任务。本集将深入讲解 CNN 的核心组件（卷积层、池化层、全连接层）…...

编程日记 2025/7/17 16:50:38

【Django】教程-1-安装+创建项目+目录结构介绍

欢迎关注我！后续会更新django教程。一周2-3更，欢迎跟进，本周会更新第一个Demo的单独一个模块的增删改查【Django】教程-4-一个增删改查的Demo【Django】教程-2-前端-目录结构介绍【Django】教程-3-数据库相关介绍 1.项目创建 1.1 安装 Djan…...

编程日记 2025/7/19 8:48:29

力扣DAY29 | 热100 | 删除链表的倒数第N个结点

前言中等 √ 链表心得：考虑好边界情况。题目给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5]示例 2： 输入&#…...

编程日记 2025/7/19 8:44:15

渗透测试过-关于学习Token、JWT、Cookie等验证授权方式的总结

关于学习Token、JWT、Cookie等验证授权方式的总结目录一、为什么Cookie无法防止CSRF攻击，而Token可以？ 二、为什么无论采用Cookie-session的方式，还是Token（JWT）的方式，在一个浏览器里，同一个…...

编程日记 2025/7/15 13:11:28

C#从入门到精通（3）

目录第九章窗体 （1）From窗体 （2）MDI窗体 （3）继承窗体第十章控件 （1）控件常用操作 （2）Label控件 （3）Button控件 &…...

编程日记 2025/7/19 1:11:26

greenhill编译出现：3201原因错误

ecom800: 21Mar25 16:26:45.609351: No licenses available for ecom800 Reason: ecom800 (3201): The License Manager cannot be contacted. 解决方式：重新加载lincese驱动。检查是否安装正确: 检查驱动是否正确识别： 以上检查都正常&#xff0c…...

编程日记 2025/7/16 4:31:22

Docker 快速入门指南

Docker 快速入门指南 1. Docker 常用指令 Docker 是一个轻量级的容器化平台，可以帮助开发者快速构建、测试和部署应用程序。以下是一些常用的 Docker 命令。 1.1 镜像管理 # 搜索镜像 docker search <image_name># 拉取镜像 docker pull <image_name>…...

编程日记 2025/7/14 11:48:32

RISC-V AIA学习2---IMSIC

我在学习文档这章时，对技术术语不太理解，所以用比较恰当的比喻来让自己更好的理解。比较通俗的理解： 将 RISC-V 系统比作一个工厂： hart → 工厂的一条独立生产线IMSIC → 每条生产线配备的「订单接收员」MSI 中断 → 客户通过…...

编程日记 2025/7/15 21:01:37

C#基础学习（五）函数中的ref和out

1. 引言：为什么需要ref和out？ 问题背景：函数参数默认按值传递，值类型在函数内修改不影响外部变量；引用类型重新赋值时外部对象不变。核心作用：允许函数内部修改外部变量的值，实现“双向传参…...

编程日记 2025/7/13 16:01:56

【每日算法】Day 9-1：贪心算法精讲——区间调度与最优选择（C++实现）

掌握高效决策的核心思想！今日深入解析贪心算法的底层逻辑，聚焦区间调度与最优选择两大高频场景，结合大厂真题与严谨证明，彻底掌握“局部最优即全局最优”的算法哲学。一、贪心算法核心思想贪心算法（Greedy Algorit…...

编程日记 2025/7/16 18:44:46

Netty源码—8.编解码原理二

大纲 1.读数据入口 2.拆包原理 3.ByteToMessageDecoder解码步骤 4.解码器抽象的解码过程总结 5.Netty里常见的开箱即用的解码器 6.writeAndFlush()方法的大体步骤 7.MessageToByteEncoder的编码步骤 8.unsafe.write()写队列 9.unsafe.flush()刷新写队列 10.如何把对象…...

编程日记 2025/7/18 4:15:03

【踩坑系列】使用httpclient调用第三方接口返回javax.net.ssl.SSLHandshakeException异常

1. 踩坑经历最近做了个需求，需要调用第三方接口获取数据，在联调时一直失败，代码抛出javax.net.ssl.SSLHandshakeException异常， 具体错误信息如下所示： javax.net.ssl.SSLHandshakeException: sun.security.validat…...

编程日记 2025/7/15 8:19:23

双目云台摄像头全方位监控方案

双目云台摄像头是一种具有两个镜头的摄像头设备，通常配备云台功能，能够实现水平和垂直方向的旋转，从而提供全方位的监控视角： 一、工作原理与特点工作原理 ：双目云台摄像头利用仿生学原理，通过两个标定后的…...

编程日记 2025/7/19 1:10:31

测谎仪策略思路

来源:【东吴金工金工专题】“高频价量相关性拥抱CTA”系列研究（四）：CPV因子期货版3.0—CPV测谎机原创高子剑量化邻距离 2024年09月20日 14:37 该报告主要介绍了“高频价量相关性拥抱CTA”系列研究中CPV因子期货版的相关内容，…...

编程日记 2025/7/17 8:13:08

2025年移动端开发性能优化实践与趋势分析

启动速度优化本质：缩短首次可见帧渲染时间。方法： iOS：利用Core ML本地模型轻量化部署，减少云端等待。Android：强制启用SplashScreen API，通过setKeepOnScreenCondition控制动画时长。冷启动需将耗时操…...

编程日记 2025/7/18 23:52:37

VScode-i18n-ally-Vue

参考这篇文章，做Vue项目的国际化配置，本篇文章主要解释，下载了i18n之后，该如何对Vscode进行配置 https://juejin.cn/post/7271964525998309428 i18n Ally全局配置项 Vscode中安装i18n Ally插件，并设置其配置项&#…...

编程日记 2025/7/14 20:53:03

vue vue3 走马灯Carousel

背景： 在项目中需要展示多张图片，但在页面上只有一张图片的有限位置，此时考虑使用轮播图实现多张图片的展示。element组件官网有走马灯Carousel的组件详细介绍。实现效果： 官网链接：点击跳转核心代码： …...

编程日记 2025/7/16 17:52:57

Android设计模式之Builder模式

一、定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。二、核心思想： 分离构造与表示：将对象的构建过程（如参数组合、校验逻辑）与对象本身分离。链式调用：通…...

编程日记 2025/7/16 12:12:31

【时时三省】(C语言基础)关系运算符和关系表达式

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省在if语句中对关系表达式disc > 0进行判断。其中的“>”是一个比较符，用来对两个数值进行比较。在C语言中，比较符（或称比较运算符）称为关…...

编程日记 2025/7/18 18:34:46

运算放大器（二）运算放大器的选型与应用

1.运算放大器的工艺决定Vos和Ib 2.TI放大器的命名规律 3.TI精密放大器家族 4.精密运放的选型指南 5.高共模抑制比放大器 6.TI其他的精密放大器 7.选型时需考虑的问题 8.TI精密运放选型实例先确定供电电压 9.确定放大器的步骤参考： 注：本文出自对b…...

编程日记 2025/7/15 14:38:16

vulhub靶场jangow-01-1.0.1

启动靶机时点shift停在这个界面点e进入编辑页面，把ro改成rw signie init/bin/bash Ctrlx保存，ip a查看网卡信息 vim /etc/network/interfaces 把enp0s17改为ens33，保存退出重启靶机，nmap扫ip ip为192.168.93.179 nmap扫端口扫…...

编程日记 2025/7/17 7:43:41

android 一步完成 aab 安装到手机

家人们谁懂！在 Android 系统安装 aab 应用超麻烦。满心期待快速体验，却发现 aab 无法直装，得先转为 apks 格式，这过程复杂易错。好不容易转好，还得安装 apks，一番折腾，时间与耐心全耗尽。别愁&a…...

编程日记 2025/7/16 14:56:35

mysqlworkbench导入.sql文件

1、MySQL Workbench 新建数据库或者在左侧导航栏的 Schemas 区域右键选择 Create Schema...输入数据库名称（例如 mydatabase），点击 Apply确认创建，点击 Finish 2、选择目标数据库在左侧导航栏的 Schemas 列表中&a…...

编程日记 2025/7/16 15:41:42

pyqt 信号与槽

PySide6 信号与槽机制详解引言 PySide6 是 Qt for Python 的官方绑定库，为 Python 提供了强大的 GUI 开发能力。其中，信号与槽（Signals and Slots） 机制是 Qt 事件处理系统的核心，它允许对象之间进行松耦合的通信&a…...

编程日记 2025/7/17 15:47:47

深入探索C++：从基础到实践

目录引言一、C 基础语法与特性 （一）命名空间（Namespace） 单独使用嵌套使用调用形式 （二）输入输出流（I/O Streams） （三）变量作用域二、C 的…...

编程日记 2025/7/16 4:32:11

从零开始完成冒泡排序（0基础）——C语言版

文章目录前言一、冒泡排序的基本思想二、冒泡排序的执行过程（一）第一轮排序（二）第二轮排序（三）第三轮排序（四）第四轮排序三、冒泡排序的代码实现（C语言）&am…...

编程日记 2025/7/16 15:56:24

Echars插入的柱状图条形图，鼠标放在图上显示坐标值

只需要将axiosPointer改为cross axisPointer.type支持类型及作用： line：默认直线型指向线shadow：显示坐标轴方向的阴影区域cross：交叉线（横向纵向双线）none：不显示指向器inside：结合…...

编程日记 2025/7/17 14:55:22

机械臂如何稳稳上桌？Mujoco场景修改实操

视频讲解： 机械臂如何稳稳上桌？Mujoco场景修改实操前面《常见机械臂模型不用找！Mujoco这儿都有！》中介绍的mujoco-menagerie中机械臂大多都是base_link放在地上的，这些场景往往和真实的场景对应不上，比如机…...

编程日记 2025/7/14 5:08:04

金融级密码管理器——抗内存扫描的密钥保险箱

目录金融级密码管理器 —— 抗内存扫描的密钥保险箱一、模块概述与设计背景二、技术原理与设计目标2.1 关键安全原理2.2 设计目标三、系统架构设计3.1 系统架构图（Mermaid示意图）四、关键技术与安全策略4.1 密钥分割与加密存储4.2 动态内存随机化技术4.3 内存扫描检测与自动…...

编程日记 2025/7/14 5:17:30

如何查看 SQL Server 的兼容性级别

在 SQL Server 中，兼容性级别是一个非常重要的设置，它决定了数据库在特定版本的 SQL Server 中运行时所使用的行为和功能。不同版本的 SQL Server 可能会在 SQL 查询优化、索引、语法、错误处理等方面有差异，因此，设置正确的兼容性…...

编程日记 2025/7/16 5:14:03

AI for CFD入门指南（传承版）

AI for CFD入门指南前言适用对象核心目标基础准备传承机制 AI for CFDLibtorch的介绍与使用方法PytorchAutogluon MakefileVscodeOpenFOAMParaviewGambit 前言适用对象新加入课题组的硕士/博士研究生对AICFD交叉领域感兴趣的本科生实习生需要快速上手组内研究工具的合作研…...

编程日记 2025/7/17 14:58:34

人工智能与网络安全

目录 1、人工智能的安全和安全的人工智能各有什么含义，如何解决 2、当人工智能技术应用于某一安全领域，会对该领域的攻守双方带来哪些机遇与挑战 3、ChatGPT原理、ChatGPT的缺陷 ChatGPT的缺陷 4、人工智能与算力，风险挑战应对 5、人…...

编程日记 2025/7/15 8:08:02

GPIO输出实验，控制LED灯

1.实验工具：FSMP1A开发板核心板： 拓展板： 2.实验要求：编写汇编程序，实现三盏灯流水程序代码： .text .global _start _start: 将RCC_MP_AHB4ENSET寄存器第4位设置为1，使能GPIO外设时钟 …...

编程日记 2025/7/18 5:01:34

小区团购管理设计与实现(代码+数据库+LW)

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装小区团购管理软件来发挥其高效地信息处理的作用&#xff0…...

编程日记 2025/7/16 9:03:47

How to use pgbench to test performance for PostgreSQL?

pgbench 是一个用于测试 PostgreSQL 数据库性能的基准测试工具。通过模拟多个客户端并发执行 SQL 查询，它可以帮助你评估数据库的性能。以下是使用 pgbench 的基本步骤： 安装 pgbench pgbench 是 PostgreSQL 的一部分，因此在安装 PostgreSQ…...

编程日记 2025/7/14 1:48:56

dbeaver插入mongodb数据日期默认使用ISODate处理，但是插入数据以后实际上是ISODate(2025-03-03T03:25:19.640Z)字符串 INSERT INTO xxx.aaa (_id, chatId, buddyId, pId, lastChatId, inspiration, createTime, modelType, version, selectedInspiration, _class)…...

编程日记 2025/7/17 18:40:36

wgcloud怎么实现服务器或者主机的远程关机、重启操作吗

可以，WGCLOUD的指令下发模块可以实现远程关机和重启使用指令下发模块，重启主机，远程关机，重启agent程序- WGCLOUD...

编程日记 2025/6/28 6:33:10

PrimeTime生成.lib竟暗藏PG添加Bug

在primeTime里生成lib，如何能带上相关的pg信息？ 这是一位群友的发问，就这个问题总结了下可能的原因和解决步骤： 概念 PrimeTime是Synopsys的静态时序分析工具，通常用于在设计的各个阶段进行时序验证。 1&#xff09…...

编程日记 2025/7/16 4:36:04

电话号码的字母组合组合总和II 回溯注意事项(Java)

电话号码的字母组合思路：多个循环可以考虑回溯。首先明确： 循环的宽度是多少，即从哪些区间取数（本题目中每个数字都是3个字母，都是从三个字母中取一个数，所以可以确定循环宽度就是每个数字对应的字符串…...

编程日记 2025/7/18 3:57:58

【软件工程】填空题

真题 2024-10 16.数据字典是用来定义_____中各个成分的具体含义的。 17.模块设计的基本原则是_____。 18.接口是操作的一个集合,其中每个操作描述了类、构件或子系统的一个_____。 19.耦合是指不同模块之间_____的度量。 20.RUP的突出特点是,它是一种以用况为驱动的、…...

编程日记 2025/7/15 6:46:42

回归——数学公式推导全过程

文章目录一、案例引入二、如何求出正确参数 1. 最速下降法 1）多项式回归 2）多重回归 2. 随机梯度下降法一、案例引入以Web广告和点击量的关系为例来学习回归，假设投入的广告费和点击量呈现下图对应关系。思考：如果花了…...

编程日记 2025/7/17 5:32:47

线程池详解：在SpringBoot中的最佳实践

线程池详解：在SpringBoot中的最佳实践引言在Java并发编程中，线程池是一种非常重要的资源管理工具，它允许我们在应用程序中有效地管理和重用线程，从而提高性能并降低资源消耗。特别是在SpringBoot等企业级应用中，正…...

编程日记 2025/7/17 10:55:40

.NET开源的智能体相关项目推荐

一、AntSK 由AIDotNet团队开发的人工智能知识库与智能体框架，支持多模型集成和离线部署能力。核心能力： • 支持OpenAI、Azure OpenAI、星火、阿里灵积等主流大模型，以及20余种国产数据库（如达梦） • 内置语义内核&a…...

编程日记 2025/7/14 8:00:02

spring-security原理与应用系列：ignoredRequests

目录 WebSecurityConfig 何时调用 configure(WebSecurity) AbstractConfiguredSecurityBuilder 如何赋值ignoredRequests 紧接上一篇文章，这一篇我们来看看核心过滤器FilterChainProxy的构造参数对象ignoredRequests是如何被赋值的？ 点击WebSecurity…...

编程日记 2025/7/14 13:42:50

（windows）conda虚拟环境下open-webui安装与启动

一、创建conda环境重点强调下，如果用python pip安装，一定要选择python3.11系列版本，我选的3.11.9。如果你的版本不是这个系列，将会出现一些未知的问题。 conda create -n open-webui python3.11 -y如下就创建好了二、安装o…...

编程日记 2025/7/15 15:34:53

CentOS系统下安装tesseract-ocr5.x版本

CentOS系统下安装tesseract-ocr5.x版本安装依赖包： yum update -y yum install autoconf automake libtool libjpeg-devel libpng-devel libtiff-devel zlib-devel yum install automake libtool bzip2 -y手动编译安装GCC（因系统默认安装的GCC版本比较…...

编程日记 2025/7/16 8:05:49

第五周日志-伪协议（3）

常见读取源码的file，php://filter和各种编码还有执行php的 php://input和各种编码，data 在进行文件包含之前，先定位一下 Flag 文件的位置（这里可以使用工具扫） or直接访问 /flag.php 文件，结果返回为空&…...

编程日记 2025/7/15 1:04:08

飞牛NAS本地部署小雅Alist结合内网穿透实现跨地域远程在线访问观影

文章目录前言1. VMware安装飞牛云（fnOS）1.1 打开VMware创建虚拟机1.3 初始化系统 2. 飞牛云搭建小雅Alist3. 公网远程访问小雅Alist3.1 安装Cpolar内网穿透3.2 创建远程连接公网地址 4. 固定Alist小雅公网地址前言嘿，小伙伴们&#xff0c…...

编程日记 2025/7/17 4:13:24

VUE3项目VITE打包优化

代码加密

依赖

配置

效果对比图

自动导入

依赖

配置

代码压缩

依赖

配置

效果对比图

图片压缩

依赖

配置

效果对比图

字体压缩

总结与实践运用

效果

相关文章：