Vite启动开发服务时Linux系统Chromium浏览器HTTP请求长期处于Pending状态

根因说明 #

这个问题是Linux平台Chromium内核浏览器的单HTTP/1.1域名最大并发请求限制触发的。Chromium在Linux平台默认对同一HTTP/1.1域名的并发请求上限为6，而Vite开发模式采用原生ESModule加载机制，首屏会一次性发起大量模块请求，超出阈值后的请求会进入等待队列，极端场景下会出现队列阻塞、请求永久Pending的问题。

解决办法 #

• 方案1：开启Vite开发服务器HTTP/2支持
  HTTP/2支持单连接多路复用，不受单域名并发请求数限制，直接修改vite.config.ts配置即可：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    https: true,
    http2: true
  }
})

首次打开页面会提示证书不安全，信任本地自签名证书即可正常使用。

• 方案2：优化项目导入逻辑，减少请求总量

  • 调整嵌套index.ts批量重导出的写法，通用组件、工具函数统一收敛到公共入口导出，避免逐层嵌套导入产生冗余请求
  • 路由组件改为懒加载模式导入，降低首屏需要加载的模块数量
  • 把高频使用的第三方依赖和内部公共模块加入Vite预构建白名单，合并请求减少运行时加载量：

  export default defineConfig({
    optimizeDeps: {
      include: [
        'vue', 'vue-router', 'pinia', // 常用第三方依赖
        '@/components/common', '@/utils' // 内部公共模块入口
      ]
    }
  })
  

• 临时规避方案
  如果不想修改项目配置，可以在启动Chromium内核浏览器时添加启动参数--max-connections-per-host=100，调高单域名并发请求上限，该方案仅适合本地开发临时使用。

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