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

问题：vite首次加载慢

news 2025/5/22 2:14:05

概述：

不是说vite项目的启动很快很快吗？

vite项目的启动确实是快（注意这里的启动是指命令行启动完毕，不是指启动完之后首页加载完毕）

如果某个界面是首次进入，且依赖比较多/比较复杂的话，那就会比较慢了。

vite之所以启动快，是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理，剩余的工作都交给浏览器，以及运行时进行依赖分析，动态打包，动态引入。

引入element-plus组件后，使用unplugin-vue-components 按需导入的依赖项更新导致页面无限次重载，会出现：

解决问题：

安装 fs

yarn add fs

配置vite.config.js 文件

方式1：

import fs from 'fs';
// 排除重载的依赖项
const optimizeDepsElementPlusIncludes = ['element-plus/es'];
fs.readdirSync('node_modules/element-plus/es/components').forEach((dirname) => {fs.access(`node_modules/element-plus/es/components/${dirname}/style/css.mjs`,(err) => {if (!err) {optimizeDepsElementPlusIncludes.push(`element-plus/es/components/${dirname}/style/css`);}});
});export default ({ mode, command }) => {
.....optimizeDeps: {include: optimizeDepsElementPlusIncludes},......})

方式2：

在根目录新建optimizeDeps.js

import fs from 'fs';
// 排除重载的依赖项
const optimizeDeps = ['@antv/g6','@antv/s2','@antv/s2-vue','@antv/x6','@antv/x6-vue-shape','@howdyjs/mouse-menu','@howdyjs/to-drag','@tinymce/tinymce-vue','axios','circular-json','codemirror','dateformat','dom-to-image','echarts','file-saver','js-cookie','pinia','qs','splitpanes','sql-formatter','tinymce','vue-draggable-plus','vue-i18n','vue-router','vxe-table','xe-utils','xlsx','element-plus/es','mitt'
];
fs.readdirSync('node_modules/element-plus/es/components').forEach((dirname) => {fs.access(`node_modules/element-plus/es/components/${dirname}/style/css.mjs`,(err) => {if (!err) {optimizeDeps.push(`element-plus/es/components/${dirname}/style/css`);}});
});
export default optimizeDeps;

配置vite.config.js

引入 import optimizeDeps from './optimizeDeps';并配置optimizeDeps

import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import optimizeDeps from './optimizeDeps';export default defineConfig(({ mode }) => {return {plugins: [// ...],resolve: {alias: {'@': resolve('./src')}},css: {preprocessorOptions: {// scss全局预定义变量scss: {additionalData: '@import "@/styles/index.scss";'}}},base: '/',publicDir: false, // public文件夹中的内容可以通过/根路径访问到，并且打包时会被完整复制到目标目录的根目录下build: {lib: {},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖}},optimizeDeps: {include: optimizeDeps}};
});

通过以上方法即可解决加载慢的问题