如何通过Laravel框架Inertia优化Laravel单页应用加速？

本文共计1124个文字，预计阅读时间需要5分钟。

Inertia 是一个将 Laravel 后端和前端框架（如 Vue/React）粘合在一起的胶水库。它不提供页面加速能力，而是简化了首屏加载、导航流畅度和资源重复请求。Inertia 的使用方式和配置涉及以下几个方面：

inertiajs/inertia-laravel 的 SSR 渲染会拖慢首屏

默认开启 SSR（服务端渲染）时，每次 inertia()->render() 都会触发 Vite 或 Webpack 的完整构建流程，生成 HTML + 内联 JS，这在开发环境没问题，但生产环境会显著增加 TTFB（Time to First Byte）。尤其当组件树深、依赖多时，Node 进程阻塞明显。

• 确认是否真需要 SSR：多数管理后台、内部系统完全可禁用；只有 SEO 敏感页（如首页、产品页）才值得保留
• 禁用方法：在 config/inertia.php 中设 'ssr' => false，并移除 APP_SSR_URL 环境变量
• 若必须用 SSR，改用预构建模式：Vite 构建后将 dist/ssr 目录交给 Node 服务，而非每次动态执行 vite build --ssr

inertia-link 导航时重复加载 assets

常见现象：点 InertiaLink 跳转后，JS/CSS 文件又重新下载一次，Network 面板看到大量 200（非 304），页面“闪一下”。这不是 Inertia 问题，而是 Laravel 没配好静态资源缓存头或版本哈希失效。

• 检查 public/mix-manifest.json 是否存在且内容正确（Laravel Mix 生成）
• 确保 APP_URL 和实际域名一致，否则 @vite 注入的脚本路径出错，浏览器反复请求旧文件
• 强制添加缓存头：在 app/Http/Middleware/TrustProxies.php 后加中间件，对 .js、.css 响应设置 Cache-Control: public, max-age=31536000, immutable
• 禁用开发时的 HMR 干扰：生产环境必须关掉 vite dev server，只用 npm run build 输出静态文件

usePage().props 数据膨胀导致 JSON 序列化慢

usePage().props 是 Inertia 传给前端的数据载体，但它不是“按需加载”，而是整个响应里所有 share()、with()、inertia()->render('X', [...]) 合并后的结果。一个用户登录态、权限菜单、通知未读数、面包屑全塞进去，JSON 字符串可能超 200KB，PHP json_encode() 耗时飙升。

• 只共享当前页面必需的 props：删掉 ViewServiceProvider 里全局 share('user') 这类宽泛注入
• 用 only() 显式筛选字段：比如 share('user', fn () => auth()->user()?->only(['id', 'name', 'avatar']))
• 敏感数据别进 props：token、密码策略、内部配置等，前端不需要的绝不传
• 大数组/集合改用懒加载：菜单项、日志列表这类，不要在 props 里直接塞全部数据，改用独立 API + useForm 或 useQuery 获取

inertia-persist 导致内存泄漏和重复 hydrate

第三方包 inertia-persist 试图自动保存表单状态，但它在页面切换时不做清理，容易把上一页的表单数据残留到下一页，甚至引发 Vue 组件 key 冲突、watcher 堆积、内存持续增长。

• 优先用原生方案：Vue 的 keep-alive + include 白名单控制哪些组件缓存，比全局 persist 更可控
• 如果必须用 inertia-persist，务必配合 onBefore 钩子清空无关键值：persist('form').onBefore(() => localStorage.removeItem('other_form'))
• 避免在 layout 组件里调用 persist()，layout 切换频繁，极易污染全局存储

最常被忽略的一点：Inertia 的“快”，建立在前后端严格契约之上。一旦后端返回的 props 结构不稳定（比如有时是数组、有时是 null）、前端组件没做防御性解构（page.props.user?.name 写成 page.props.user.name），就会触发全量 fallback 渲染，反而比传统跳转还慢。稳定性比技巧更重要。