将 Firebase 从 V8 升级到 V9 后,仅在移动版本上,有一个 IFRAME 从 https://[Firebase projectId].firebaseapp.com/__/auth/iframe.js 加载巨大的 javascript 文件 (263K) (见下图):
到目前为止,我发现的唯一线索是,它可能与本论坛中提到的 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 模块化(不兼容)代码片段:https://firebase.google.com/docs/web/modular-upgrade。
任何关于摆脱这个巨大的 iframe.js 文件的想法或线索将不胜感激。尽管该库是测试版,但其他一切都按预期进行,通过树摇动大大减少了客户端包的大小。
您可以在我的个人网站上使用 Lighthouse 进行测试: https://guydumais.digital
提前致谢,再见!
我们也遇到这个问题很长一段时间了,我最近才发现这个链接 https://firebase.google.com/docs/auth/web/custom-dependency
在移动浏览器上,该库将自动抢先打开一个指向您的 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);
这是我的解决方案。我只在需要时动态 import firebase auth。所以我不会在整个应用程序中调用它,只有当我向 firebase 发出请求时才调用它。 如果您有中小型应用程序,则应该不需要太多工作。 提示:要保留当前用户的状态,请使用cookie。
const onSubmit = async () => {
const { getAuth } = await import("firebase/auth");
getAuth(firebase);
}
如果您想保留使用重定向/弹出登录的选项,解决方案如下。在您的主 Firebase 配置中,覆盖确定是否应加载 auth/iframe.js 文件的 getter。
import { initializeApp } from "firebase/app";
import { browserPopupRedirectResolver } from "firebase/auth";
Object.defineProperty(browserPopupRedirectResolver.prototype,
'_shouldInitProactively', { get: function() {return false;} });
const firebaseConfig = { /*...*/ };
export const app = initializeApp(firebaseConfig);
稍后需要时,从某个地方调用以下函数,该函数将在用户看到使用弹出/重定向按钮登录时加载,可能是在渲染方法中。关键调用是重定向解析器初始化函数。
let resolverIsInitialized = false;
async function initializePopupRedirectResolverOnRender() {
if (resolverIsInitialized) return;
try {
await auth.authStateReady();
if (!resolverIsInitialized) auth._popupRedirectResolver._initialize(auth);
resolverIsInitialized = true;
} catch (error) {
console.error(error);
}
}
参考我在GitHub上的解决方案: https://github.com/firebase/firebase-js-sdk/issues/4946#issuecomment-1918193756