Open yanyue404 opened 11 months ago
在一个 Nuxt3 新项目中需要分析框架默认集成的首屏开启 preload 和 prefetch 优化方案而引起页面初始化加载从白屏到最终加载页面期间的图标、字体页面不正常闪动的问题。
prefetch 和 preload 是浏览器提供的两种资源预加载技术,它们可以预先请求浏览器可能需要的资源,并将这些资源缓存到本地,以便在页面需要时能够更快地获取,从而显著提高网站性能,优化用户体验。这些资源可以是文本文件、图像、音频或视频等各种类型的文件。
预加载属性 preload 与 prefetch 区别
在面对这个场景的问题最有效的分析思路的方案莫过于直接预览 dist 产物,本地修改资源快速定位问题从而确定修改方案。
本例子中的关键 页面 css 文件被 prefetch 在空闲阶段加载,导致了页面闪动的问题。
摘自 https://cli.vuejs.org/zh/guide/deployment.html#%E6%9C%AC%E5%9C%B0%E9%A2%84%E8%A7%88
dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值),所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve:
dist
publicPath
file://
dist/index.html
npm install -g serve # -s 参数的意思是将其架设在 Single-Page Application 模式下 # 这个模式会处理即将提到的路由问题 serve -s dist
# 1.全局安装live-server yarn global add live-server # 2. 进入打包的后目录 cd ./dist # 本地预览,默认端口8080 live-server # 指定端口 live-server --port 9000
这里采用 serve ,默认 3000 端口打开。
│ Serving! │ │ │ │ - Local: http://localhost:3000/ │ │ - On Your Network: http://ip:3000/ │ │ │ │ Copied local address to clipboard!
代理重定向(这里使用 whistle), 解决静态资源 404 的资源重定向地址:
http://ip:3000/nprd/N202200220/ http://ip:3000/
静态资源可以访问了,但是这个时候会发现页面用到的接口状态为 405 不可访问。
代理配置兼顾资源与网络请求:
https://zzz.cn/nprd/N202200220/ http://ip:3000/
最终效果:
要解决单页应用配置了 publicPath 而导致的本地预览 dist 包资源丢失的问题,可使用代理直接将测试环境或线上环境的访问地址代理到本地启动 dist 包的所在端口即可解决。
前言
在一个 Nuxt3 新项目中需要分析框架默认集成的首屏开启 preload 和 prefetch 优化方案而引起页面初始化加载从白屏到最终加载页面期间的图标、字体页面不正常闪动的问题。
prefetch 和 preload 是浏览器提供的两种资源预加载技术,它们可以预先请求浏览器可能需要的资源,并将这些资源缓存到本地,以便在页面需要时能够更快地获取,从而显著提高网站性能,优化用户体验。这些资源可以是文本文件、图像、音频或视频等各种类型的文件。
预加载属性 preload 与 prefetch 区别
在面对这个场景的问题最有效的分析思路的方案莫过于直接预览 dist 产物,本地修改资源快速定位问题从而确定修改方案。
本例子中的关键 页面 css 文件被 prefetch 在空闲阶段加载,导致了页面闪动的问题。
本地预览
dist
目录需要启动一个 HTTP 服务器来访问 (除非你已经将publicPath
配置为了一个相对的值),所以以file://
协议直接打开dist/index.html
是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器,例如 serve:配置了 publicPath 启动后的现状
这里采用 serve ,默认 3000 端口打开。
代理重定向(这里使用 whistle), 解决静态资源 404 的资源重定向地址:
静态资源可以访问了,但是这个时候会发现页面用到的接口状态为 405 不可访问。
代理配置兼顾资源与网络请求:
最终效果:
经验总结
要解决单页应用配置了 publicPath 而导致的本地预览 dist 包资源丢失的问题,可使用代理直接将测试环境或线上环境的访问地址代理到本地启动 dist 包的所在端口即可解决。
参考