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

vue-vben-admin 首页加载慢优化 升级vite2到vite3

我的vben-admin是2.8版本的,首次首页加载太慢了,升级下vite,原来1分钟,现在20s左右

1.修改package.json

添加

"terser": "^5.14.2",

修改

 "@vitejs/plugin-legacy": "^2.0.0","@vitejs/plugin-vue": "^3.0.1","vite": "^3.0.2","vite-plugin-mkcert": "^1.9.0","vite-plugin-purge-icons": "^0.8.2","vite-plugin-pwa": "^0.12.3","vite-plugin-windicss": "^1.8.7",

2.删除 pnpm-lock.yaml

3.执行下pnpm install

4.更改其他文件

mock/_createProductionServer.ts

const modules = import.meta.glob('./**/*.ts', { eager: true });
 mockModules.push(...(modules as Recordable)[key].default);

src/locales/lang/en.ts

const modules = import.meta.glob('./en/**/*.ts', { eager: true });
 ...genMessage(modules as Recordable<Recordable>, 'en'),

src/locales/lang/zh_CN.ts

const modules = import.meta.glob('./zh-CN/**/*.ts', { eager: true });
 ...genMessage(modules as Recordable<Recordable>, 'zh-CN'),

src/router/menus/index.ts

 const mod = (modules as Recordable)[key].default || {};

src/router/routes/index.ts

// import.meta.glob('*', { eager: true }) 直接引入所有的模块 Vite 独有的功能
const modules = import.meta.glob('./modules/**/*.ts', { eager: true });
 const mod = (modules as Recordable)[key].default || {};

vite.config.ts

brotliSize: false 更改成  reportCompressedSize: false,
define: {...//新增以下变量__COLOR_PLUGIN_OUTPUT_FILE_NAME__: undefined,__PROD__: true,__COLOR_PLUGIN_OPTIONS__: {},
},

参考链接

github-vben-admin-commit

报错处理

相关文章:

vue-vben-admin 首页加载慢优化 升级vite2到vite3

我的vben-admin是2.8版本的,首次首页加载太慢了,升级下vite,原来1分钟,现在20s左右 1.修改package.json 添加 "terser": "^5.14.2",修改 "vitejs/plugin-legacy": "^2.0.0","vitejs/plugin-vue": "^3.0.1",&qu…...

集合框架07:LinkedList使用

1.视频链接&#xff1a;13.14 LinkedList使用_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p142.LinkedList集合的增删改查操作 package com.yundait.Demo01;im…...

一区鱼鹰优化算法+深度学习+注意力机制!OOA-TCN-LSTM-Attention多变量时间序列预测

一区鱼鹰优化算法深度学习注意力机制&#xff01;OOA-TCN-LSTM-Attention多变量时间序列预测 目录 一区鱼鹰优化算法深度学习注意力机制&#xff01;OOA-TCN-LSTM-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.基于OOA-TCN-LSTM-Attenti…...

Cesium 黑夜效果

Cesium 黑夜效果 原理&#xff1a; 根据相机到片元的距离雾化场景的后处理效果 效果&#xff1a;...

leetcode动态规划(二)-斐波那契数列

题目 509.斐波那契数列 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0…...

【MySQL】增删改查-进阶(一)

目录 &#x1f334;数据库约束 &#x1f6a9;约束类型 &#x1f6a9;NOT NULL &#x1f6a9;UNIQUE &#x1f6a9;DEFAULT &#x1f6a9;PRIMARY KEY &#x1f6a9;FOREIGN KEY &#x1f6a9;CHECK &#x1f384;表的设计 &#x1f6a9;一对一 &#x1f6a9;一对多 …...

MacOS RocketMQ安装

MacOS RocketMQ安装 文章目录 MacOS RocketMQ安装一、下载二、安装修改JVM参数启动关闭测试关闭测试测试收发消息运行自带的生产者测试类运行自带的消费者测试类参考博客&#xff1a;https://blog.csdn.net/zhiyikeji/article/details/140911649 一、下载 打开官网&#xff0c;…...

OpenCV高级图形用户界面(6)获取指定窗口中图像的矩形区域函数getWindowImageRect()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 提供窗口中图像的矩形区域。 该函数 getWindowImageRect 返回图像渲染区域的客户端屏幕坐标、宽度和高度。 函数原型 Rect cv::getWindowImage…...

SpringColoud GateWay 核心组件

优质博文&#xff1a;IT-BLOG-CN 【1】Route路由&#xff1a; Gateway的基本构建模块&#xff0c;它由ID、目标URL、断言集合和过滤器集合组成。如果聚合断言结果为真&#xff0c;则匹配到该路由。 Route路由-动态路由实现原理&#xff1a; 配置变化Apollo 服务地址实例变化…...

5.计算机网络_抓包工具wireshark

安装 Linux中安装wireshark&#xff1a; sudo apt-get install wireshark Linux中执行wireshark&#xff1a; sudo wireshark 使用 注意&#xff1a;只有与外网交互的数据才可以被wireshark抓到&#xff0c;本机回环的数据不会被抓到 实验内容&#xff1a; 使用nc命令…...

基于Java的车辆管理系统的设计与实现-计算机毕业设计源码41727

摘要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对车辆管理系统等问题&#xff0c;对车辆管理…...

在软件开发中低耦合和高内聚是什么,如何实现,请看文章

软件开发中&#xff0c;“低耦合”和“高内聚”是设计原则&#xff0c;用于提高系统的可维护性、可扩展性和可重用性。下面我会详细解释这两个概念及其带来的好处和规避的坏处。 低耦合&#xff08;Low Coupling&#xff09; 定义&#xff1a; 低耦合指的是模块之间的依赖关系…...

关于MyBatis-Plus 提供Wrappers.lambdaQuery()的方法

实例&#xff1a; private LambdaQueryWrapper<XXX> buildQueryWrapper(XXXBo bo) { Map<String, Object> params bo.getParams(); LambdaQueryWrapper<XXX> lqw Wrappers.lambdaQuery(); lqw.eq(bo.getOrgId() ! null, XXX::getOrgId, bo.getOrgId()); lq…...

C++——vector的了解与使用

目录 引言 vector容器的基本概念 1.功能 2.动态大小 3.动态扩展 vector的接口 1.vector的迭代器 2.vector的初始化与销毁 3.vector的容量操作 3.1 有效长度和容量大小 (1)使用示例 (2)扩容机制 3.2 有效长度和容量操作 (1)reserve (2)resize 4.vector的访问操作…...

Ubuntu设置静态IP地址

Ubuntu如果是最小安装&#xff0c;没有图形界面&#xff0c;需要配置静态IP&#xff0c;该怎么操作呢&#xff1f; Netplan 是最新版 Ubuntu 的默认网络管理工具。Netplan 的配置文件使用 YAML 编写&#xff0c;扩展名为 .yaml。 注意&#xff1a;配置文件中的空格是语法的一部…...

力扣349.两个数组的交集

题目链接&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的 交集。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,…...

FreeRTOS - 软件定时器

在学习FreeRTOS过程中&#xff0c;结合韦东山-FreeRTOS手册和视频、野火-FreeRTOS内核实现与应用开发、及网上查找的其他资源&#xff0c;整理了该篇文章。如有内容理解不正确之处&#xff0c;欢迎大家指出&#xff0c;共同进步。 1. 软件定时器 软件定时器也可以完成两类事情…...

Python的Atlassian第三方库的详细介绍

atlassian-python-api 是一个用于与 Atlassian 生态系统进行交互的 Python 库&#xff0c;支持与多种 Atlassian 工具&#xff08;如 Jira、Confluence、Bitbucket 等&#xff09;进行 API 调用。它简化了 REST API 的调用&#xff0c;提供了高层次的抽象&#xff0c;方便开发者…...

Java中的基本循环结构详解

在Java编程中&#xff0c;循环是控制流的重要组成部分&#xff0c;用于重复执行一段代码。Java提供了三种基本的循环结构&#xff1a;for循环、while循环和do-while循环。本文将详细介绍这三种循环的语法和使用场景&#xff0c;并通过示例代码展示其应用。 一&#xff0c;for …...

关于Git Bash中如何定义alias

一、在一次临时Bash会话中使用alias 在Bash中直接输入alias xxdddd&#xff0c;xx为对应要执行的命令的缩写&#xff0c;dddd为要执行的命令&#xff0c;如alias ddcd /d&#xff0c;输入完成后&#xff0c;在Bash中输入dd&#xff0c;即可切换至D盘。 此种设置方式&#xff…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...