缓存 React/Meteor 网页答案

【问题标题】：Caching an React/Meteor webpage缓存 React/Meteor 网页
【发布时间】：2020-05-07 19:14:26
【问题描述】：

我想加快 React/Meteor 网页的初始加载速度。几个想法之一是缓存数据。所以票价这么好... 服务人员对此进行了尝试。这对我来说只有在“/public/”文件夹下才有可能，但另外我想缓存来自例如的数据。 "/client/" 用于缓存更多数据。这样可以缓存其他文件夹中的更多数据吗？

我做了与“第 1 步 - 添加服务工作者”中描述的几乎相同的操作： https://dev.to/jankapunkt/transform-any-meteor-app-into-a-pwa-4k44

更新： 我们仅在没有 Internet 连接的 Intranet 中使用此网页。

【问题讨论】：

错误是什么？什么不正常？
我不仅要缓存“/public/”文件夹。缓存公共工作如何缓存其他文件夹？对于来自其他文件夹的其他文件，我在 Chrome-Develper-Tools "Content-Length" = 0 中获得。（我猜这意味着文件长度以字节为单位。）但我没有收到真正的错误消息。

标签： reactjs meteor service-worker

【解决方案1】：

使用 React 和 Meteor 的东西并不是这样工作的。预计将有一个高达 1MB 的 JS 包交付给您的客户。一个中等大小的应用程序应该看起来 400-500kb 的 gzip 包大小。

不要将公用文件夹用于资产，将所有内容放在具有边缘缓存的 CDN 中，例如 AWS Cloudfront（存储在 S3 中并通过 Cloudfront 公开）或任何其他存储。在您的 CDN 中，您可以设置到期和缓存控制（max-age），客户端（浏览器）使用它来缓存资产。从 CDN 交付您的 JS 和 CSS 包。广泛使用拆分代码（最好在路由级别）。尽可能使用异步库表单地图、播放器等，而不是 NPM（构建到你的包中）。使用 PWA 环境，您将缓存捆绑文件而不是公用文件夹。您为 PWA 遵循的教程不完整且无用。它只关注如何在审核中获得绿色徽章，它没有任何用处。

还有一件事，您的 Meteor 捆绑包大小会影响 Meteor 服务器上的流量。这就是为什么您最好从 CDN 交付捆绑包和所有资产的原因。使用 Service Worker 缓存更多内容只会导致闪烁、选项卡和浏览器之间的不一致、错误。

【讨论】：

感谢您的回答！我们仅在没有 Internet 连接的 Intranet 中使用此网页。 - 很抱歉没有告诉这个。
这引发了另一个问题：您的 Intranet 是 LAN 还是通过 Internet 连接 VPN？如果您在 LAN 中遇到此问题（每个连接 +100Mbps），那么肯定有问题。如果您在偏远地区（如其他国家/地区的其他办事处）看到这种情况，您可以考虑使用 Electron 客户端或 Cordova 桌面或...我将帮助您进行适当的 PWA 配置以获取您需要的文件...。记住上面提到的事情。