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 存储

Firebase 分析和性能日志在移动设备上的位置在哪里?

导入在 Firebase Client v9 (npm) 上不起作用

Firebase Web Auth 在移动设备上不起作用?

列出 Firebase 存储 v9 中的所有文件

将图像从 ReactJS 上传到 Firebase v9 存储