Vite+Vue构建速度快但首次加载缓慢问题求助

针对你遇到的构建速度快但浏览器加载请求pending超2分钟的问题，结合你的Vite配置，给出以下排查方向和解决办法：

• 强制重新执行依赖预构建
  Vite的依赖预构建缓存若出现异常，可能导致浏览器请求阻塞。手动删除node_modules/.vite目录，重启开发服务器，让Vite重新预构建所有依赖。同时留意终端输出的预构建日志，确认所有依赖都被正确处理。

• 调整Bootstrap别名配置
  你配置的~bootstrap别名可能和Sass默认的~前缀规则冲突（Sass会自动从node_modules查找~开头的导入），导致路径解析异常。尝试移除这个别名，直接在代码中使用import 'bootstrap'或在SCSS中用@import 'bootstrap'；如果必须保留别名，改为'bootstrap': resolve(__dirname, 'node_modules/bootstrap')。

• 排查全局SCSS导入的问题
  additionalData中全局导入的base.scss如果包含大量样式、嵌套过深或存在循环依赖，会导致编译阻塞，进而拖慢组件请求。暂时注释掉这个全局导入，测试页面加载速度是否恢复，再逐步排查base.scss中的内容。

• 优化开发服务器配置
  添加server配置项，解决可能的文件访问权限或端口问题：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { resolve } from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
        // 调整或移除bootstrap别名
        'bootstrap': resolve(__dirname, 'node_modules/bootstrap')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          // 先注释掉，测试后再恢复
          // @import "@/assets/styles/base.scss";
          `
        }
      }
    },
    server: {
      port: 3000,
      fs: {
        strict: false // 解决可能的文件访问权限限制
      }
    }
  })
  

• 定位具体阻塞请求
  在浏览器开发者工具的「网络」面板中，点击处于pending状态的请求，查看「发起者」和「调用栈」，确认是哪个组件或依赖的导入导致了阻塞，比如是否存在无限循环导入、某个依赖需要长时间加载等问题。

内容的提问来源于stack exchange，提问作者jcbjob