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

报错处理

http://www.lryc.cn/news/462564.html

相关文章:

  • 集合框架07:LinkedList使用
  • 一区鱼鹰优化算法+深度学习+注意力机制!OOA-TCN-LSTM-Attention多变量时间序列预测
  • Cesium 黑夜效果
  • leetcode动态规划(二)-斐波那契数列
  • 【MySQL】增删改查-进阶(一)
  • MacOS RocketMQ安装
  • OpenCV高级图形用户界面(6)获取指定窗口中图像的矩形区域函数getWindowImageRect()的使用
  • SpringColoud GateWay 核心组件
  • 5.计算机网络_抓包工具wireshark
  • 基于Java的车辆管理系统的设计与实现-计算机毕业设计源码41727
  • 在软件开发中低耦合和高内聚是什么,如何实现,请看文章
  • 关于MyBatis-Plus 提供Wrappers.lambdaQuery()的方法
  • C++——vector的了解与使用
  • Ubuntu设置静态IP地址
  • 力扣349.两个数组的交集
  • FreeRTOS - 软件定时器
  • Python的Atlassian第三方库的详细介绍
  • Java中的基本循环结构详解
  • 关于Git Bash中如何定义alias
  • luckfox1106初次使用
  • ab命令深入解析:ApacheBench性能测试工具
  • VSCode创建VUE项目(二)前端登录页面
  • centos 8.4学习小结
  • AI 设计工具合集
  • mac 源代码安装openresty
  • 人工智能和机器学习之线性代数(二)
  • Postman中的form-data 和 JSON 的区别
  • 网络安全基础知识点_网络安全知识基础知识篇
  • Vue.js 从入门到精通:全面解析组件化、路由与状态管理(附 Todo 案例)
  • AI Weekly#1:过去一周重要的AI资讯汇总