如何本地预览前端应用的产物 dist 文件

[yanyue404]

前言

在一个 Nuxt3 新项目中需要分析框架默认集成的首屏开启 preload 和 prefetch 优化方案而引起页面初始化加载从白屏到最终加载页面期间的图标、字体页面不正常闪动的问题。

prefetch 和 preload 是浏览器提供的两种资源预加载技术，它们可以预先请求浏览器可能需要的资源，并将这些资源缓存到本地，以便在页面需要时能够更快地获取，从而显著提高网站性能，优化用户体验。这些资源可以是文本文件、图像、音频或视频等各种类型的文件。

预加载属性 preload 与 prefetch 区别

• preload 告诉浏览器立即加载资源;
• prefetch 告诉浏览器在空闲时才开始加载资源；
• preload、prefetch 仅仅是加载资源，并不会“执行”;
• preload、prefetch 均能设置、命中缓存；
• 正确使用 preload、prefetch 不会导致重复请求；
• 错误使用 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：

npm install -g serve

# -s 参数的意思是将其架设在 Single-Page Application 模式下

# 这个模式会处理即将提到的路由问题

serve -s dist

• 其他本地服务器预览(通过 live-server)

# 1.全局安装live-server
yarn global add live-server
# 2. 进入打包的后目录
cd ./dist
# 本地预览，默认端口8080
live-server
# 指定端口
live-server --port 9000

配置了 publicPath 启动后的现状

这里采用 serve ，默认 3000 端口打开。

│ Serving! │
│ │
│ - Local: http://localhost:3000/ │
│ - On Your Network: http://ip:3000/ │
│ │
│ Copied local address to clipboard!

1. 问题：资源不可访问

代理重定向（这里使用 whistle）, 解决静态资源 404 的资源重定向地址:

http://ip:3000/nprd/N202200220/ http://ip:3000/

2. 问题：接口不可访问

静态资源可以访问了，但是这个时候会发现页面用到的接口状态为 405 不可访问。

代理配置兼顾资源与网络请求：

https://zzz.cn/nprd/N202200220/ http://ip:3000/

最终效果：

经验总结

要解决单页应用配置了 publicPath 而导致的本地预览 dist 包资源丢失的问题，可使用代理直接将测试环境或线上环境的访问地址代理到本地启动 dist 包的所在端口即可解决。

参考

• 预加载属性 preload 与 prefetch 区别
• 让你的网站加载更快 —— Prefetch 和 Preload 技术详解