修复 Nuxt 的两个问题

2024-04-25 · 周四一般小雨

晚上打算继续上传一些相册图片,结果发现相册页面的图片资源一直在转圈圈,非常奇怪。我此前写了一个图片懒加载组件,在客户端完成加载后,理应触发 onLoad 事件消除加载中的状态。我起初怀疑是浏览器的 Bug,结果写了一个纯 JS 的版本验证了下发现一切正常,怀疑是 onLoad 在图片加载之后设置,导致没有触发。@戴兜 说可能就是水合的问题,解决办法很简单,使用 onMounted 检查一下图片的 complete 属性就可以了,看上去现在的组件逻辑应该改成默认 loading=false,检测到非 complete 再设置成 true 的效果。

还记得之前的 日记 提到过,Nuxt 的生产环境下会给 App.vue 文件的第一层组件样式额外打包了一份样式输出在 Head 里面,出现一个样式被另一个相同样式覆盖的情况。 @戴兜 大佬说修改配置项 Inline Styles 可以去除相关输出。看上去这是它内置的优化机制,主要是为了提高首屏速度(但是文档也没解释这个到底有什么用)。我后续对比了一下有和无的首屏速度,基本上没有多少差异,用户无明显感知(Lighthouse 前两张截图白屏),反倒是用户网络延迟的因素导致网站访问卡顿的影响较大。

第三个问题则是日常编码的时候遇到的,新版的 Vue VSC 扩展貌似在 JSX 下有 Bug,输入常用引入项(例如 refonMounted)都没法自动 import 在文件顶部,如果使用 SFC 模式则没问题,这种 Bug 就有点恶心人,也不知道该怎么反馈...

Love Is A Long Road

Love Is A Long Road

Tom Petty
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 18 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君