首屏白屏 1.8 秒,Performance 里从空白到 FCP 的时段,网络面板显示首页那个 chunk 排在第三个才下载。乍看像缓存或者权限的锅,追下去往往不是。

import Home from './views/Home.vue' // 同步
const Detail = () => import('./views/Detail.vue')

追下去是这么回事:路由全部懒加载,首页组件也被拆成独立 chunk,入口 JS 执行完还要再发一次请求才能拿到首屏代码。多出来的一个 RTT 在弱网下就是一两秒。

「首屏路由懒加载」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

具体做法是,首页和登录页改成同步引入,直接打进入口包;其余路由保持懒加载,别为了首屏把整站塞进一个文件;路由切换补骨架屏,至少让用户看到结构而不是纯白。

验收就看一点,Performance 里 FCP 提前到一秒内,首屏不再出现纯白。

作者 9823189