Laravel集成Vite自动重载比浏览器手动刷新慢10倍的原因排查

问题核心原因 #

Vite的自动重载确实会触发不必要的Laravel视图编译：

• 手动刷新时，Laravel会复用已编译的视图缓存（只要视图文件未修改），所以耗时仅300ms左右；
• 而Vite触发自动重载时，默认会强制Laravel重新编译所有关联的视图文件——当你引入大量<x-my-crappy-few-lines-component/>这类组件时，每次修改都会触发全量组件编译，这就是耗时飙升到3秒的关键。

可行解决方案 #

• 启用视图缓存（开发环境适配版）
  在.env中设置VIEW_CACHE=true，同时搭配自动清缓存脚本：在package.json的scripts里添加

  "watch:blade": "chokidar 'resources/views/**/*.blade.php' -c 'php artisan view:clear'"
  

  启动开发时同时运行npm run watch和npm run watch:blade，这样修改blade文件后会自动清缓存，既复用缓存又保证修改生效。

• 优化Vite监听配置
  修改vite.config.js，排除视图编译目录，避免Vite误触发不必要的重载：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
    plugins: [laravel()],
    server: {
      watch: {
        ignored: ['storage/framework/views/**'],
      },
    },
  });
  

• 优化Blade组件性能

  • 将高频复用的小组件改为匿名组件（直接放在resources/views/components目录下，无需创建组件类），减少编译时的类解析开销；
  • 避免过度嵌套组件，降低视图编译的解析层级；
  • 对极高频复用的组件，可在组件类中设置缓存：

    class MyCrappyFewLinesComponent extends Component
    {
      public $cacheExpiresAt = 60; // 缓存60秒
      // ...
    }
    

• 临时禁用Vite全页重载（仅Blade修改时）
  如果你的Blade修改不涉及JS/CSS资源，可修改Laravel Vite插件的配置，让Blade文件变化时仅触发局部刷新而非全页重载，需要配合Alpine.js或Livewire实现局部更新逻辑。

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