解决vite+vue3运行项目打开页面跳转很慢打不开需要刷新问题：optimized dependencies change. reloading

问题

在基于vite+vue3的大型前端项目中，经常遇到运行项目后打开本地地址跳转页面的时候页面打开很慢或者需要刷新重新编译问题，终端显示optimized dependencies change. reloading

原因

Vite在首次加载时会预构建依赖，但动态引入的组件可能未被识别，触发重新构建，导致整个应用重新加载。这通常出现在以下场景：

项目中大量使用按需导入的UI库（如Element Plus）
动态加载的第三方模块未被预构建
项目首次启动或新增依赖时未完成预构建

解决方案

在vite.config.ts文件中添加optimizeDeps预构建配置项
vite.config.ts：对element-plus组件、 'dayjs', 'ali-oss', 'js-md5'库进行依赖预构建

import fs from 'fs'
import { defineConfig } from 'vite'

const getOptimizeDepsElementPlusIncludes = () => {
  const fileNames = fs.readdirSync('node_modules/element-plus/es/components')
  const result = []

  fileNames.forEach((fileName) => {
    const styleFolderPath = `element-plus/es/components/${fileName}/style`

    if (fs.existsSync(`node_modules/${styleFolderPath}`)) {
      result.push(`${styleFolderPath}/index`)
    }
  })

  return result
}

export default defineConfig({
  optimizeDeps: {
    // 强制预构建的依赖项
    include: [...getOptimizeDepsElementPlusIncludes(), 'dayjs', 'ali-oss', 'js-md5']
  }
})

调试

因为预构建问题只会在首次运行加载出现，如果有缓存是不会出现，所以运行vite --force 强制重启应用：强制重新预构建依赖，无视缓存

pnpm vite --force 
// 或者
yarn vite --force

vite.config.js 中optimizeDeps配置项理解

optimizeDeps 是 Vite 中的一个重要配置项，主要用于优化依赖预构建过程。optimizeDeps 配置主要影响开发环境（dev），对生产环境（production）没有影响。

开发环境

Vite 使用 optimizeDeps 进行依赖预构建
目的是优化开发服务器性能和热更新体验
预构建的结果存储在 node_modules/.vite 目录

生产环境

使用 Rollup 进行完整的打包
所有依赖都会被打包到最终的构建产物中
optimizeDeps 的配置在此阶段被忽略

所以，当你在调整 optimizeDeps 配置时，只需要考虑开发环境的性能优化即可，不用担心它会影响到生产环境的构建结果。