当前位置: 首页 > 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…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...