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

时间：2024-10-18 10:48:33

我的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

报错处理

相关文章