@neoblackcap 不至于用上 websocket 吧，这成本也太高了。

@woxihejinghao 离线包加载完成后肯定行啊，重要的是人力成本；你说的更新这些，http 缓存机制都有，除去 cache-control 相关的相应头还有 Last-Modified ，etag

@kamilic 感谢提供方案，等我有空也研究下 service worker

今天工作忙，所以只能晚上来回复了；也感谢楼上几位朋友的分享，我也有一些新的收获。

--------------
先说下我为什么不太能接受离线包方案
1. 正常情况下 SPA 应用多数页面都是要和服务端交互的，你有页面不能走通接口有啥意义
2. 离线包我公司要前端 /后端 /客户端三人合作，前端还有控制版本，人力成本高；至于离线包增量更新，这不是重新实现 http 缓存方案吗？放着现有的 http 缓存机制不用，自己花时间去做，不浪费时间？站在开发者角度，我觉得不够有效率
3. 站在用户角度，你能接受你手机的 app 下载在 H5 更新后就直接下载一个可能几兆的离线包，甚至很多页面你都不会访问。

我如何解决部分白屏时间的 （我用 react ）：
1. H5 加载流程是这样：webview 启动（ A ）-> 请求 index.html 并解析（ B ） -> 请求主要模块和首页资源（ C ） -> 进入首页（ D ）；
可能造成页面白屏的阶段是 A 、B 、C ，A 阶段到 B 阶段（ dom 和 css 解析完成之前）需要客户端处理（加个 loading ？），B 阶段 （ dom 和 css 解析完成之后）就会展示 <div id="root"></div>，这里开始到 C 阶段又是一段比较久的白屏，因为主要模块一般比较大（几十到两三百 kb ）；
- A 阶段我就不说了，不是前端能处理的
- B 阶段到 D 阶段之前是可以处理的，其实 <div id="root"></div> 可以改为 <div id="root"><span class="loading" /></div> 的，dom 和 css 解析完到 react 模块加载完成是就会展示这个 loading 样式（用 style 会比 svg 动画好）；然后主要模块体积也要小，引入外部模块也要考虑模块体积。打包后的首屏体积一般 500kb 以下，控制到 100kb 也不是没可能
- D 阶段进入首页之后就用 import 方法预加载其他页面或者模块资源。（ service worker 我没研究，就不说了

2. 说说 http 缓存
- 服务器会默认给 html 、css 、js 、img 等资源设置一个 3600s 的缓存有效期。假设你什么都不做，你更新内容发布上线，会有页面没更新的情况，因为 html 这个文件是有缓存期的；需要对这个入口文件设置 no-cache （感谢 @lisongeee 提醒协商缓存） 或者 no-store 缓存响应头，就能保证每次进来都是最新的；其他资源都设置一年缓存过期时间，这样对用户体验就很好了，只要用户访问过该资源，设备就会缓存资源到本地，二次进入就是秒开。

我觉得对于 SPA 应用，即使是弱网环境，客户端在获取 html 之前设置 loading 展示 + 前端加载主要模块设置 loading + http 缓存

------
@kop1989smurf 你说的首屏广告这都属于特殊情况，还有类似笔记应用等多数页面不用和服务端交互的我觉得用离线包没问题，但是用户上面的解决白屏的方法+控制首屏资源体积+http 缓存真的适用于大多数场景。

或许 app 加载后可以在后台开个 webview 预加载 H5 首页，之后再访问 H5 主要模块不就走缓存了么？

@kop1989smurf
1. 首先不是来争论哪个方案绝对胜利的，我只是表达 http 缓存方案大多数情况下完全满足需求，像首屏广告这样没有请求的静态资源走离线包提前获取很合理。

2. 没说首次加载不重要，对于 spa 应用，页面都是懒加载，首屏资源体积如果控制得好，几百 kb 一般用户加载也不慢，我只是觉得和服务器有交互的页面没必要走离线包

先睡了，明天再讨论

@Bijiabo 其实也没有确切的定义，我会在进入首页后用 setTimeout(preload, 500) 去加载其他页面资源，比如使用 import ，vite 会给你生成 <link rel="modulepreload" src="" />

@july1995 我是全局设置一个元素和一个状态，请求后的数据如果要看，就打印成 json 放在当前页面后面

@kop1989smurf
1. 先说 app 需要新的静态 html 广告的问题，我觉得这个属于特殊场景，我也不是做客户端的，不过启动广告一般都是用 cdn 提速加载吧，靠默认的加载肯定不满足需求，另外这中广告如果是图片的话走缓存的话也就第一次加载慢点，后面都是缓存
2. 说下 http 缓存机制不可控在哪？请举例

@stardust21 你这个想法其实就是 http cache 的逻辑，http 缓存都是存在你的手机或者浏览器本地，https://stackoverflow.com/questions/61824427/where-is-the-storage-location-of-the-browsers-http-cache-disk-or-memory

@RightHand @StarainX @stefanieewu @wu67
我公司做的 app 是面向手机低端用户，他们手机不太好，网络也差，所以就经常首次加载白屏，我那时候技术不行，不会用 http 缓存以及解决首屏加载时白屏问题，所以当时就选择了离线包方案。
- 离线包方案也还行，进入 app 首页就全量加载所有 H5 资源，用户网络不好也能加载页面。缺点是随着 H5 项目增大，我觉得每次全量加载浪费带宽流量，当然也可以做增量，但这不是重新实现 http 缓存么；你要真说用户网络很差提前加载页面，但现在页面都要请求，有页面没请求响应不也一样么
- 使用 http 缓存我觉得应该是很好的方案，index.html 设置 no-store ，css/js/image 等其他资源设置比较长的有效期，用户按需加载，我觉得对于绝大多数情况表现都好；对于某些场景，可以在页面空闲时间预加载其他页面资源

就是跟同事就这两个方案意见不一，来看看大家怎么选的

一楼答案正确且简洁

看官网就好了，然后上网找人要个项目源码看看，再自己试着实现某个网站的几个页面

next.js

小项目会，大项目就算了

推荐一下我写的约定式路由插件 https://www.npmjs.com/package/vite-plugin-react-views ，根据文档结构自动生成 routes ，op 的项目路由还是要手动配置，直接引入插件改一下就好了

少了个 eslint 插件就生态差点意思？配 eslint 很花时间？
都是被人喂饭喂多了惯出来的，也别拿 nextjs 和 vite 比了，定位都不一样

厉害