时间戳

首页 > 解决方案 > 缓存 React/Meteor 网页

reactjs - 缓存 React/Meteor 网页

问题描述

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

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

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

标签： reactjsmeteorservice-worker

解决方案

使用 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 缓存更多只会导致闪烁、选项卡和浏览器之间的不一致以及错误。

推荐阅读