Firebase v9 在移动设备上加载大型 iframe.js (263K)
Posted
技术标签:
【中文标题】Firebase v9 在移动设备上加载大型 iframe.js (263K)【英文标题】:Firebase v9 loads a large iframe.js (263K) on mobile 【发布时间】:2021-10-11 23:46:45 【问题描述】:将 Firebase 从 V8 升级到 V9 后,仅在移动版本上,有一个 IFRAME 从 https://[Firebase projectId].firebaseapp 加载一个巨大的 javascript 文件 (263K)。 com/__/auth/iframe.js(见下图):
到目前为止,我发现的唯一线索是它可能与本论坛中提到的 chrome 中的第三方 cookie 限制有关:https://groups.google.com/g/firebase-talk/c/TC1xTPG85EI。
我没有在 Chrome 中使用任何 cookie 限制,因为根据此处的设置允许所有 cookie:chrome://settings/cookies?search=cookies
另外,我在此处禁用了安全浏览增强保护并将其设置为无保护(不推荐):chrome://settings/security?search=cookies
但 iframe.js 仍在移动模式下加载。
我在这里使用带有版本 9 模块化(不兼容)代码 sn-ps 的 firebase@9.0.0-beta.8 库:https://firebase.google.com/docs/web/modular-upgrade。
任何关于摆脱这个巨大的 iframe.js 文件的想法或线索将不胜感激。尽管该库是 BETA,但其他一切都可以通过 tree-shaking 正常工作,从而大大减少了客户端包的大小。
您可以在我的个人网站上使用 Lighthouse 进行测试: https://guydumais.digital
提前致谢,再见!
【问题讨论】:
也发布在groups.google.com/g/firebase-talk/c/L7XLEann3W4,它可能会得到更多的回应。 你可能在使用 react-firebase-hooks 吗? 否 @DavidGregorian,我在我的身份验证组件中使用原生 firebase 挂钩,如下所示:import useFirebaseAuth from '@lib/hooks/useFirebaseAuth'
在我的 package.json 我我只使用 2 个包:1) "firebase": "9.0.0-beta.8",
2) "firebase-admin": "^9.11.0",
我正在使用 "@angular/fire": "^7.0.4" 和 "firebase": "^9.0.2" 并在我的 ionic-angular PWA 中遇到相同的问题。我的应用只有模块化实现。
【参考方案1】:
这是我的解决方案。我只在需要时动态importfirebase auth。所以我不会在整个应用程序中调用它,只有在向 firebase 发出请求时才调用它。 如果您有中小型应用程序,则工作量应该不大。 提示:要保持当前用户的状态,请使用 cookie。
const onSubmit = async () =>
const getAuth = await import("firebase/auth");
getAuth(firebase);
【讨论】:
你能给我举个例子如何动态导入它吗? 看看这个javascript.info/modules-dynamic-imports 动态导入不起作用。【参考方案2】:这个问题我们也有一段时间了,我最近才发现这个链接 https://firebase.google.com/docs/auth/web/custom-dependencies
在移动浏览器上,该库会自动为您的 Auth 域抢先打开 iframe。这样做是为了让大多数用户获得无缝体验,但它可能会在应用程序启动时加载额外的代码来影响性能。可以通过利用 initializeAuth() 并手动将 browserPopupRedirectResolver 依赖项传递给需要它的函数来避免这种行为
import initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider from "firebase/auth";
import initializeApp from "firebase/app";
const app = initializeApp(/** Your app config */);
const auth = initializeAuth(app,
persistence: [indexedDBLocalPersistence, browserLocalPersistence],
);
// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);
【讨论】:
以上是关于Firebase v9 在移动设备上加载大型 iframe.js (263K)的主要内容,如果未能解决你的问题,请参考以下文章
使用 Firebase v9 将文件从网站上传到 Firebase 存储