近期由于状态不佳、心态有些“麻木”，在一个相对简单的业务场景中，还是被现实狠狠上了一课。

这次线上发生了个白屏问题，表面看似平平无奇，但背后暴露的却是我对“开发-部署-生产”这条链路的惯性思维。

今天不藏私，完整复盘这次事故。

📝 背景简述

这是一个 Vue 3 + Vite 驱动的小应用。本地环境无论是开发还是联调，所有页面，包括 /detail/:type/:id 的详情页，都正常渲染。

但部署至生产后，用户在点击详情页时，页面直接白屏，控制台无 404、无报错，浏览器 network 请求也无异常，整个页面“消失”得悄无声息。

直到我追溯到路由表，才发现自己踩了个看似低级的坑。

🚩 问题核心 —— 路由配置中的“隐形炸弹”

问题代码

- component: import('../views/Detail.vue')
+ component: () => import('../views/Detail.vue')

🔍 具体表现

当路由里直接写成：

component: import('../views/Detail.vue')

这种 同步导入 写法，会让 Vite 把 Detail.vue 直接打进主包内（build 阶段）。这导致线上环境下，详情页依赖的 chunk 必须等待整个主包下载完成后才能执行。

本地开发由于 Vite 的原地模块和 localhost 网络环境加持，这种问题几乎无感。但线上 CDN + 弱网环境（4G、弱 WiFi）下，用户的主包未必能第一时间完整拉取，详情页就可能直接白屏。

正确写法

标准的懒加载方式，应该使用动态导入：

component: () => import('../views/Detail.vue')

这样 Vite 会自动拆分出独立的 chunk，用户访问详情页时按需加载，提升首屏体验，避免线上白屏。

---

🎯 更深层的反思

1. “开发视角” 和 “生产视角”错位

本地环境下的“万事大吉”，会让人误以为线上也无碍。这次事件让我意识到，即使是简单的路由配置，也应始终以生产环境为唯一标准，尤其在用 Vite 做构建的项目中。

2. 因为状态不好，忽视了工程标准

复盘下来，状态下滑直接导致了惯性操作和忽略 review 细节。这种情况下，哪怕写了单测，也可能遗漏了线上场景下的细节问题。

---

💡 后续优化建议

实战建议

1. 路由全量复查定期审查项目中所有路由配置，尤其是 /detail/:type/:id 这类带参数的动态路由，确认是否存在同步导入写法。
2. 引入错误边界为 Detail.vue 添加 Vue 的 ErrorBoundary 组件或手动 try-catch，捕获渲染异常，避免用户看到“沉默白屏”。
3. 模拟真实环境在开发阶段，使用 DevTools 的 network throttling 模拟弱网，并结合 Lighthouse 做线上性能评估。
4. CI 规则强化
   增加 lint/CI 钩子，禁止使用同步导入 import('...') 写法，统一要求使用 () => import()。

📚 技术栈依赖的注意事项

• vite / vue-router / vite-plugin-pages 等核心依赖升级需审慎，特别是影响动态导入行为的 breaking changes。
• 保持项目 router 与 lazy-load 机制始终保持一致，确保 chunk 分割策略符合生产环境的性能要求。

---

✅ 结语

这次事故给我的一个深刻感受是——作为前端，不能过度依赖“开发视角”，必须习惯用“线上环境视角”去审视每一行代码，特别是工程化和资源加载的部分。