问题：vite首次加载慢

概述： 

不是说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
    }
  };
});

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

扩展

当安装新的插件，如实现兄弟组件间的通信，需要安装mitt插件并配置，当做完这些工作后，控制台报错：

net::ERR_ABORTED 504 (Outdated Optimize Dep)

 “Outdated Optimize Dep” 表示 Vue 3 项目中的某些依赖项存在过时的优化。这可能导致本地地址访问出现问题，而网络地址正常访问的原因是网络地址可能使用了较新版本的依赖项。

原因是vite项目做了上述optimizeDeps的优化

解决：

只需在如在方式2的optimizeDeps.js文件中的 optimizeDeps[] 里面把新安装的mitt插件放进去即可。