借助vite来优化前端性能
Vite 是一个现代化的前端构建工具,凭借其基于原生 ES 模块的开发服务器和高效的构建能力,可以显著优化前端性能。
一、开发环境优化
1.快速启动与热更新
-
Vite 利用浏览器对 ES 模块的原生支持,在开发环境中无需打包,直接按需加载模块。
-
修改代码后,仅更新修改的部分,而不是重新构建整个应用。
2.按需加载
-
使用动态导入(
import()
)实现路由和组件的按需加载,减少初始加载时间。
const Home = () => import('./views/Home.vue')
二、生产环境优化
1.代码分割
-
Vite 默认支持代码分割,将代码拆分为多个小块,按需加载。
-
结合动态导入,进一步优化首屏加载性能。
2.Tree Shaking
-
Vite 基于 Rollup,默认支持 Tree Shaking,移除未使用的代码。
-
确保使用 ES 模块语法(
import/export
),避免副作用代码。
3.压缩资源
-
Vite 使用
terser
压缩 JavaScript,cssnano
压缩 CSS。 -
配置
build.minify
启用压缩:
export default defineConfig({build: {minify: 'terser'}
})
4.图片压缩
-
使用
vite-plugin-imagemin
插件压缩图片:
npm install vite-plugin-imagemin -D
import imagemin from 'vite-plugin-imagemin'
export default defineConfig({plugins: [imagemin({gifsicle: { optimizationLevel: 7 },optipng: { optimizationLevel: 7 },mozjpeg: { quality: 20 },pngquant: { quality: [0.8, 0.9] },svgo: { plugins: [{ removeViewBox: false }] }})]
})
5.Gzip/Brotli 压缩
-
使用
vite-plugin-compression
插件生成 Gzip/Brotli 压缩文件:
npm install vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression'
export default defineConfig({plugins: [viteCompression({algorithm: 'gzip'})]
})
6.CDN 加速
-
将静态资源上传到 CDN,并在 Vite 中配置
base
:
export default defineConfig({base: 'https://cdn.example.com/assets/'
})
三、优化加载性能
1.预加载关键资源
-
使用
<link rel="preload">
预加载关键资源:
<link rel="preload" href="/src/assets/logo.png" as="image">
2.异步加载非关键资源
-
使用
import()
动态加载非关键资源:
import('./non-critical-module.js')
3.使用 vite-plugin-pages
自动生成路由
自动生成按需加载的路由,减少手动配置:
npm install vite-plugin-pages -D
import Pages from 'vite-plugin-pages'
export default defineConfig({plugins: [Pages()]
})
四、优化 CSS
1.提取 CSS
-
使用
build.cssCodeSplit
提取 CSS 文件:
export default defineConfig({build: {cssCodeSplit: true}
})
2.使用 vite-plugin-purgecss
移除未使用的 CSS
-
移除未使用的 CSS 代码:
npm install vite-plugin-purgecss -D
import purgecss from 'vite-plugin-purgecss'
export default defineConfig({plugins: [purgecss()]
})
五、优化缓存
1.文件哈希
-
Vite 默认在文件名中添加哈希值,确保文件更新后客户端能获取最新版本。
-
配置
build.rollupOptions.output
自定义哈希:
export default defineConfig({build: {rollupOptions: {output: {entryFileNames: `[name].[hash].js`,chunkFileNames: `[name].[hash].js`,assetFileNames: `[name].[hash].[ext]`}}}
})
2.HTTP 缓存
-
配置服务器设置静态资源的缓存策略:
//nginx
location /assets/ {expires 1y;add_header Cache-Control "public";
}
六、性能监控与分析
1.使用 vite-plugin-inspect
分析构建结果
-
查看构建产物的详细信息:
npm install vite-plugin-inspect -D
import inspect from 'vite-plugin-inspect'
export default defineConfig({plugins: [inspect()]
})
2.使用 Lighthouse 进行性能测试
-
使用 Chrome DevTools 的 Lighthouse 工具分析性能,并根据建议优化。
七、总结
通过 Vite 优化前端性能的核心策略包括:
- 开发环境:利用按需加载和热更新提升开发效率。
- 生产环境:代码分割、Tree Shaking、资源压缩、CDN 加速等。
- 加载性能:预加载关键资源、异步加载非关键资源。
- CSS 优化:提取 CSS、移除未使用的样式。
- 缓存优化:文件哈希、HTTP 缓存。
相关文章:
借助vite来优化前端性能
Vite 是一个现代化的前端构建工具,凭借其基于原生 ES 模块的开发服务器和高效的构建能力,可以显著优化前端性能。 一、开发环境优化 1.快速启动与热更新 Vite 利用浏览器对 ES 模块的原生支持,在开发环境中无需打包,直接按需加载…...
[工控机安全] 使用DriverView快速排查不可信第三方驱动(附详细图文教程)
导语: 在工业控制领域,设备驱动程序的安全性至关重要。第三方驱动可能存在兼容性问题、安全漏洞甚至恶意代码,威胁设备稳定运行。本文将手把手教你使用 DriverView工具,高效完成工控机驱动安全检查,精准识别可疑驱动&a…...
Execution failed for task ‘:path_provider_android:compileDebugJavaWithJavac‘.
What went wrong: Execution failed for task ‘:path_provider_android:compileDebugJavaWithJavac’. Could not resolve all files for configuration ‘:path_provider_android:androidJdkImage’. Failed to transform core-for-system-modules.jar to match attributes {…...
基于SpringBoot的社区/物业管理系统
项目介绍 平台采用B/S结构,后端采用主流的SpringBoot语言进行开发,前端采用主流的Vue.js进行开发。是一个综合的社区/物业管理系统。 整个平台包括前台和后台两个部分。 - 前台功能包括:小区信息、社区论坛、社区公告、社区留言板、个人中心。…...
vmware下linux无法上网解决方法
首先,打开打开"编辑" “虚拟网络编辑器”,并将"桥接"方式的网卡选择为主机上网的网卡。 虚拟机中,设置IP地址为主机网卡同样子网下的ip地址: 并且要选择桥接模式!注意如下图,"复制物理连接状…...
【数据库备份】docker中数据库备份脚本——MySql备份脚本
docker中数据库备份脚本——MySql备份脚本 #!/bin/bash# MySQL数据库信息 DB_USER"root" DB_PASSWORD"你的密码"# 备份保存主目录 BACKUP_ROOT"/data/data_backup/mysql"# 最多保留的备份日期文件夹数 MAX_DATE_FOLDERS15# 数组包含要备份的数据…...
SpringBoot 第二课(Ⅰ) 整合springmvc(详解)
目录 一、SpringBoot对静态资源的映射规则 1. WebJars 资源访问 2. 静态资源访问 3. 欢迎页配置 二、SpringBoot整合springmvc 概述 Spring MVC组件的自动配置 中央转发器(DispatcherServlet) 控制器(Controller) 视图解…...
centos家用笔记
改用阿里云yum源 因CentOS7已经停止维护,原有的yum源也无法使用,在国内,改用阿里云yum源是个方便的选择。 cd /etc/yum.repos.d/ mkdir backup mv Cent* backup wget http://mirrors.aliyun.com/repo/Centos-7.repo mv Centos-7.repo Cen…...
数据可视化(matplotlib)-------辅助图标的设置
目录 一、认识图表常用的辅助元素 坐标轴 二、设置坐标轴的标签、刻度范围和刻度标签 (一)、设置坐标轴的标签 1、xlabel()------设置x轴标签 2、ylabel()------设置y轴标签 (二) 、设置刻度范围和刻度标签 1、xlim()和ylim()函数分别可…...
15-双链表-双链表基本操作
题目 来源 827. 双链表 - AcWing题库 思路 此题我只想说,千万千万别漏了头结点和尾结点,不然根本查不出来是哪里出了问题,因为传入的k会有问题;最左边插入,相当于是在头结点的右边插入(也就是0号节点的右…...
HTTP和RPC的区别
RPC和 HTTP是两种常见的通信方式,它们在设计目标、使用场景和技术实现上有显著区别。以下是它们的详细对比: 1. 定义与核心思想 特性RPCHTTPRemote Procedure Call远程过程调用HyperText Transfer Protocol超文本传输协议定义一种协议或框架࿰…...
【Linux内核系列】:动静态库详解
🔥 本文专栏:Linux 🌸作者主页:努力努力再努力wz 💪 今日博客励志语录: 有些鸟儿是注定是关不住的,因为它们的每一片羽翼都沾满了自由的光辉 ★★★ 本文前置知识: 编译与链接的过程…...
【IROS 2025】CMU提出路径规划器PIPE:机器人探索效率提升14.6%,地图准确率提高9.3%!
在自主机器人探索未知环境的研究中,如何高效地规划路径、最大化信息获取,一直是一个核心问题。传统的方法往往仅在离散的路径点上计算信息增益,而缺乏对整个路径信息获取的综合考量,从而可能导致探索低效甚至错误的规划决策。近日…...
《笔记》Android 获取第三方应用及查看应用信息、apk大小、缓存、存储,以及第三方清除缓存
获取应用相关信息: PS:manifest标签中设置以下属性表示系统应用 android:process"system" android:sharedUserId"android.uid.system" //获取所有应用(非系统apk,有些应用获取不到) List<ApplicationInf…...
npm 安装 pnpm 的详细步骤及注意事项
一、安装步骤 1.全局安装 pnpm npm install -g pnpm2.验证安装 pnpm -v输出版本号即表示安装成功。 二、升级 pnpm 若已安装旧版本,可通过以下命令升级: npm install -g pnpmlatest三、配置镜像加速 设置淘宝镜像 pnpm config set registry http…...
大白话详细解读React框架的diffing算法
1. Diffing 算法是什么? Diffing 算法是 React 用来比较虚拟 DOM(Virtual DOM)树的一种算法。它的作用是找出前后两次渲染之间的差异(diff),然后只更新这些差异部分,而不是重新渲染整个页面。 …...
【架构】单体架构 vs 微服务架构:如何选择最适合你的技术方案?
文章目录 ⭐前言⭐一、架构设计的本质差异🌟1、代码与数据结构的对比🌟2、技术栈的灵活性 ⭐二、开发与维护的成本博弈🌟1、开发效率的阶段性差异🌟2、维护成本的隐形陷阱 ⭐三、部署与扩展的实战策略🌟1、部署模式的本…...
面试redis常被问到的面试题含答案
什么是Redis?它的特点是什么? Redis是一个开源的内存数据库,用于存储数据并支持多种数据结构(如字符串、哈希、列表、集合、有序集合等)。其特点包括高性能、支持持久化、数据结构丰富、原子性操作、支持事务等。 Red…...
Asp.net Core API 本地化
本文是一个demo,演示了如何根据用户接口查询字段(正常放header中),设置当前culture,并获取当前culture的key value给用户提示 创建Resources文件夹,添加以下三个文件 其中ExceptionUnuse 是一个空的类,供IStringLocalizer使用&a…...
使用Java实现Oracle表结构转换为PostgreSQL的示例方案(AI)
核心代码 import java.sql.*; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;public class OracleToPGConverter {// 类型映射表private static final Map<String, String> TYPE_MAPPING new HashMap<>()…...
win32汇编环境,网络编程入门之八
;在上一教程里,我们学习了简单的处理服务器返回的数据 ;在这一教程里,我们了解一下,当连接上网站后,应该发送什么数据过去的问题 ;这里有个简单的方式学习,以下是一个示例 ;我们上网的时候可以用谷歌浏览器,…...
Java EE 进阶:MyBatis
MyBatis是一个优秀的持久化框架,用于简化JDBC的开发。 持久层就是持久化访问的层,就是数据访问层(Dao),用于访问数据库的。 MyBatis使用的准备工作 创建项目,导入mybatis的启动依赖,mysql的驱…...
Linux驱动开发基础(can)
目录 1.can的介绍 2.can的硬件连接 2.1 CPU自带can控制器 2.2 CPU没有can控制器 3.电气属性 4.can的特点 5.can协议 5.1 can的种类 5.2 数据帧 5.2.1 标准数据帧格式 5.3.1 扩展数据帧格式 5.3 遥控帧 5.4 错误帧 5.5 过载帧 5.6 帧间隔 5.7 位填充 5.8 位时…...
Linux 命令行整理(完善中)
文件类 查看文件类 cat 用于连接文件并打印到标准输出设备上,可用于查看文件内容.(短文件) use:cat example.txtmore 分页的形式显示文件内容,适合查看较长的文件(长) use: more example.txtless 也是分页查看文件内容ÿ…...
回调方法传值汇总
<template v-slot"scope"><el-switch v-model"scope.row.open" change"(p1) > changeOpen(p1, scope.row)"></el-switch></template>公域流量 多选 selection-change“val > multipleSelection val”...
分享一个精灵图生成和拆分的实现
概述 精灵图(Sprite)是一种将多个小图像合并到单个图像文件中的技术,广泛应用于网页开发、游戏开发和UI设计中。在MapboxGL中,跟之配套的还有一个json文件用来记录图标的大小和位置。本文分享基于Node和sharp库实现精灵图的合并与…...
python中的min函数的key的用法 - abs绝对值
前言 继续上一章节提及的 Python 中 min() 函数的用法,包括其基本语法、处理列表、接收多个参数 这个章节将补充一些新的知识点例如: min函数中key的另一种用法abs绝对值 min(iterable, *iterables, keyNone, defaultNone) 知识点 key 参数 key 是一个可选参数…...
我开发的PDF转WORD免费工具
ZhouShengHuan 欢迎小伙伴使用~...
kubernetes高级实战
一、模拟企业环境进行一个实战部署 [rootmaster node]# kubectl apply -f pod-tomcat.yaml pod/tomcat-test created [rootmaster node]# kubectl get pods NAME READY STATUS RESTARTS AGE tomcat-test 2/2 Running 0 2s [rootmaster node]…...
IntelliJ 配置文件plugin.xml
在 IntelliJ IDEA 插件开发中,plugin.xml 是插件的配置文件,它包含了关于插件的所有基本信息、扩展点、依赖关系等。该文件使用 XML 格式进行定义。以下是 plugin.xml 中常见的元素及其用途: <idea-plugin><!-- 插件的基本信息 --&…...
《心理学与生活》2025最新网课答案
《心理学与生活》2025最新网课答案 文章目录 《心理学与生活》2025最新网课答案发展与教育单元测试情绪与情感单元测验人格与动机单元测试感知与记忆单元测试文化与社会单元测试 发展与教育单元测试 题数 20 棉花糖实验中哪些小孩长大后的表现更好()。 …...
11 python 数据容器-字符串
一、什么是数据容器 举个例子,一个办公室里有一群牛马,他们都有自己的名字,如果没有容器的概念,那么我们用变量来存放他们的名字,比如: name1 "翠花" name2 "玛丽" name3 "二…...
2025.3.20总结
阅读:《时间贫穷》第二章,里面讲到,运动,多行善事,体验自然,都会增强自我效能感,是对抗时间焦虑的强有力的方式。 花时间运动是值得的,公司每周三都是运动周,把运动视作…...
鸿蒙NEXT开发问题大全(不断更新中.....)
目录 问题1:鸿蒙NEXT获取华为手机的udid 问题2:[Fail]ExecuteCommand need connect-key? 问题3:测试时如何安装app包 问题1:鸿蒙NEXT开发获取华为手机的udid hdc -t "设备的序列号" shell bm get --udid 问题2&…...
【北京迅为】iTOP-RK3568开发板OpenHarmony系统南向驱动开发UART接口运作机制
瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…...
大模型在冠心病风险预测及临床方案制定中的应用研究
目录 一、引言 1.1 研究背景与目的 1.2 国内外研究现状 1.3 研究方法与创新点 二、大模型预测冠心病风险原理与方法 2.1 数据收集与预处理 2.1.1 数据来源 2.1.2 数据清洗与整理 2.2 特征工程 2.2.1 特征提取 2.2.2 特征选择与优化 2.3 模型选择与训练 2.3.1 常用…...
【从零开始:如何用Vue3打造响应式个人博客网站】
前言 在前端开发领域,Vue.js 是一个非常流行且强大的框架。本文将详细介绍如何使用 Vue3 构建一个完整的响应式个人博客网站。无论你是初学者还是有一定经验的开发者,本文都将为你提供详细的步骤和代码示例。 1. 环境搭建 首先,确保你已经安…...
【vulhub/wordpress靶场】------获取webshell
1.进入靶场环境: 输入:cd / vulhub / wordpress / pwnscriptum 修改版本号: vim docker-compose.yml version: 3 保存退出 开启靶场环境: docker - compose up - d 开启成功,docker ps查看端口 靶场环境80…...
ngx_http_conf_ctx_t
定义在 src/http/ngx_http_config.h typedef struct {void **main_conf;void **srv_conf;void **loc_conf; } ngx_http_conf_ctx_t; ngx_http_conf_ctx_t 是 Nginx 中用于管理 HTTP 配置上下文的核心结构体,其设计体现了 Nginx 多级配置&…...
大模型+知识图谱:赋能知识智能新升级
在大模型(Large Language Model, LLM)飞速发展的今天,如何把传统行业中沉淀多年的大量结构化与非结构化数据真正“用起来”,正成为推动智能化转型的关键一步。 找得到,看得懂,为何很难? 以制造…...
python学智能算法(八)|决策树
【1】引言 前序学习进程中,已经对KNN邻近算法有了探索,相关文章链接为: python学智能算法(七)|KNN邻近算法-CSDN博客 但KNN邻近算法有一个特点是:它在分类的时候,不能知晓每个类别内事物的具…...
压力测试实战指南:JMeter 5.x深度解析与QPS/TPS性能优化
一、压力测试基础概念 1.1 什么是压力测试? 定义:模拟极端负载场景验证系统性能极限 目的:发现性能瓶颈、评估系统可靠性、验证容错能力 常见类型:负载测试、压力测试、稳定性测试、峰值测试 1.2 核心性能指标解析 1.2.1 QP…...
鸿蒙NEXT项目实战-百得知识库04
代码仓地址,大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点: 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…...
Spring Boot Actuator 自定义健康检查(附Demo)
目录 前言1. Demo2. 拓展 前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF Spring Boot 的 actuator 提供了应用监控的功能,其中健康检查(Health Check)是一个重要的部分&…...
Flutter小白零基础入门到高级项目实战全集
Flutter零基础入门到高级项目实战全集内容如下: Dart入门基础教程16讲、Null safety 、late 关键字、空类型声明符?、非空断言!、required 、Flutter入门基础、Flutter瀑布流布局、Flutter动画、Flutter异步流、GlobalKey 、Flutter国际化、…...
TCP 协议
文章目录 TCP 协议简介数据包格式TCP的特性连接机制确认与重传缓冲机制全双工通信流量控制差错控制拥塞控制 端口号三次握手数据传输四次挥手抓包参考 本文为笔者学习以太网对网上资料归纳整理所做的笔记,文末均附有参考链接,如侵权,请联系删…...
NO.51十六届蓝桥杯备战|堆算法题|第k小|除2|最小函数值|序列合并|舞蹈课(C++)
P3378 【模板】堆 - 洛谷 #include <bits/stdc.h> using namespace std;const int N 1e6 10; int n; int heap[N];void up(int child) {int parent child / 2;while (parent > 1 && heap[child] < heap[parent]){swap(heap[child], heap[parent]);chil…...
【QA】观察者模式在QT有哪些应用?
1. 信号与槽机制 Qt的**信号与槽(Signals & Slots)**是观察者模式的典型实现,通过元对象系统(Meta-Object System)实现松耦合通信。 核心特点: 类型安全:编译时检查参数匹配跨线程支持&…...
coze ai assistant Task5
没想到coze的组队学习这么快就过去了,我也从一个不懂coze的小白变成了一个能简单尝试小程序的懵懂小白。虽然几次学习并不能掌握很多的技能,但也让我知道coze的无限可能,组队结束后我会继续努力学习,做更多使自己偷懒的小工具~ 需…...
MATLAB神经网络优化1000个案例算法汇总
【2025最新版】MATLAB神经网络优化1000个案例算法汇总(长期更新版) 本文聚焦神经网络、优化算法,神经网络改进,优化算法改进,优化算法优化神经网络权重、超参数等,现在只需订阅即可拥有,简直是人工智能初学者的天堂。…...