Vite页面首次加载极慢求助（Laravel+Vue+Inertia环境）

问题背景 #

• 开发栈：Laravel 10、Vue、Inertia、Vite，开发阶段使用npm run dev启动Vite服务
• 核心症状：此前运行正常，突然出现页面首次加载极慢（最长达4分钟），后续同一页面/组件请求速度恢复正常；组件首次编译需数分钟，缓存后恢复正常，重启Vite则问题重现
• 已排除项：
  • 代码无变更，回滚至上周Git提交后问题依旧
  • 同机器上非Vue/Vite的Laravel项目运行正常，排除Apache、php-fpm或网络问题
  • 系统内存、CPU使用率均未超50%，切换node14/node20版本结果一致
  • npm run build构建生产版本耗时不到1分钟，网站运行正常
• 定位结果：在vite.config.js中禁用HMR（hmr: false）后速度恢复正常，问题出在HMR加载组件环节

当前vite.config.js配置 #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
    server: {
        hmr: {
            host: '192.168.64.3',
            https: true,
        },
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
            detectTls: 'my-project.linux-dev.com',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        basicSsl(),
    ],
});

注：192.168.64.3为Multipass（Docker）机器，使用自签名证书通过HTTPS暴露URL，该配置上周运行正常。

排查方向及解决方案 #

1. 检查HMR网络与证书配置 #

• 验证自签名证书信任：本地浏览器访问https://192.168.64.3:5173，若出现证书警告，手动添加信任；或暂时将HMR的https设为false测试是否恢复正常
• 确认HMR主机配置：尝试将hmr.host改为0.0.0.0或localhost，同时用ping 192.168.64.3验证本地与Multipass机器的网络连通性

2. 调整文件监听与缓存策略 #

• 关闭或优化文件轮询：当前watch.usePolling: true在Multipass环境下可能降低监听效率，尝试改为usePolling: false，或添加interval: 1000调整轮询间隔
• 强制清除Vite缓存：执行npm run dev -- --force，或手动删除node_modules/.vite目录后重启服务

3. 优化Laravel Vite插件配置 #

• 调整TLS检测：注释detectTls配置，或替换为Multipass机器IP192.168.64.3，避免域名与IP的TLS检测冲突
• 关闭自动刷新：暂时设置refresh: false，排除Laravel插件的页面刷新逻辑对HMR的干扰

4. 排查端口与进程冲突 #

• 检查HMR端口占用：执行lsof -i :5173或netstat -tulpn | grep 5173查看端口是否被占用，若冲突则在配置中指定新端口：

  server: {
    port: 5174,
    hmr: {
      host: '192.168.64.3',
      port: 5174,
      https: true,
    }
  }
  

• 开放Multipass防火墙端口：确保5173（或自定义端口）已开放，允许本地机器访问

5. 调整依赖版本 #

• 降级/升级Laravel Vite插件：执行npm install laravel-vite-plugin@[之前正常版本号]，或升级到最新稳定版，修复兼容性问题
• 更新Vite核心：执行npm install vite@latest，修复已知的HMR性能bug

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