Firebase v9 在移动设备上加载大型 iframe.js (263K) [英] Firebase v9 loads a large iframe.js (263K) on mobile

问题描述

将 Firebase 从 V8 升级到 V9 后，仅在移动版本上，有一个 IFRAME 从 https://[Firebase projectId].firebaseapp 加载一个巨大的 javascript 文件 (263K).com/__/auth/iframe.js(见下图):

After upgrading Firebase from V8 to V9, on mobile version only, there is an IFRAME loading a huge javascript file (263K) from https://[Firebase projectId].firebaseapp.com/__/auth/iframe.js (See image below):

到目前为止我发现的唯一线索是它可能与本论坛中提到的 chrome 中的第三方 cookie 限制有关:https://groups.google.com/g/firebase-talk/c/TC1xTPG85EI.

The only clue I've found so far is that it could be related to third-party cookies restrictions in chrome as mentioned in this forum: https://groups.google.com/g/firebase-talk/c/TC1xTPG85EI.

我没有在 Chrome 中使用任何 cookie 限制，因为根据此处的设置允许所有 cookie:chrome://settings/cookies?search=cookies

I'm not using any cookie restrictions in Chrome since all cookies are allowed based on settings here: chrome://settings/cookies?search=cookies

此外，我在此处禁用了安全浏览增强保护并将其设置为无保护(不推荐):chrome://settings/security?search=cookies

Also, I have disabled Safe Browsing Enhanced protection and set it to No protection (not recommended) here: chrome://settings/security?search=cookies

但 iframe.js 仍在以移动模式加载.

but iframe.js is still being loaded in mobile mode.

我在这里使用 firebase@9.0.0-beta.8 库和版本 9 模块化(不兼容)代码片段:https://firebase.google.com/docs/web/modular-upgrade.

I am using firebase@9.0.0-beta.8 library with version 9 modular (not compat) code snippets here: https://firebase.google.com/docs/web/modular-upgrade.

关于摆脱这个巨大的 iframe.js 文件的任何想法或线索将不胜感激.尽管该库是 BETA 版，但其他一切都按预期工作，并通过 tree-shaking 显着减少了客户端包大小.

Any idea or clue about getting rid of this huge iframe.js file will be appreciated. Even though the library is BETA, everything else works as expected with tree-shaking that considerably reduced client side package size.

您可以在我的个人网站上使用 Lighthouse 进行测试:https://guydumais.digital

You can test with Lighthouse on my personal Website here: https://guydumais.digital

提前致谢，再见！

推荐答案

这是我的解决方案.我只在需要时动态 import firebase auth.所以我不会在整个应用程序中调用它，只有在向 firebase 发出请求时才调用它.如果您有中小型应用程序，它应该不会有太多工作.提示:要保持当前用户的状态，请使用 cookie.

Here goes my solution. I only dynamic import firebase auth when I need it. So I don't call it in the entire application, only when am making request to firebase. If you have small to medium application, it should not be to much work. Tip: To keep the state of current user, use cookies.

const onSubmit = async () => {
  const { getAuth } = await import("firebase/auth");
  getAuth(firebase);
}

这篇关于Firebase v9 在移动设备上加载大型 iframe.js (263K)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！