无法在 React 中延迟加载 Firebase v9 的"useAuthState"和"auth"

Question

我有一个React应用程序正在尝试优化。LazyLoad组件很容易，但我发现自己陷入困境的地方是尝试异步加载和代码分割firebase依赖关系。

它们占据了初始加载js的80%，在页面加载之前我不需要它们做任何事情，但它们与main.chunk.js捆绑在一起。

我尝试过懒惰导入：

import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "./firebase";

function App() {
const [user] = useAuthState(auth);
...

但您不允许导入非ReactComponent函数。

因此，我尝试在useEffect中加载useAuthState((，但不允许使用set hooks to a hook，这有点道理。

这是我得到的错误：React Hook "useAuthState" cannot be called inside a callback.

如何在页面初始加载之前延迟加载firebase组件？

这就是main.js的编译用途：

…js/main.bbdadee4.js(herospace.app)
../node_modules/@firebase/firestore/dist/index.esm2017.js
../node_modules/react-dom/cjs/react-dom.production.min.js
../node_modules/@firebase/firestore-compat/src/api/database.ts
../node_modules/@firebase/auth/src/core/auth/auth_impl.ts
../node_modules/@firebase/webchannel-wrapper/node_modules/google-closure-library/closure/goog/labs/net/webchannel/webchannelbase.js

但是

../node_modules/react-dom/cjs/react-dom.production.min.js

是我唯一需要加载页面初始状态的，这就是为什么我试图延迟加载任何firebase脚本。

非常感谢您的帮助，谢谢！

Answer 1

我找到了一个解决方案，它不捆绑firebase包，也不延迟加载它们，但我只是为应用程序的授权部分扩展了一条路径。

example.com/a-blog-post与example.com/editProfile(需要Firebase的路由(不在同一条路由上，而是将所有内容都转移到了example.com/app/editProfile

然后，我只在/app中加载Firebase导入，并在达到/app时加载渲染的组件。

我仍然喜欢firebase的懒惰加载选项，但在那之前，这个解决方案会做得很好。移动&桌面PageSpeed分数为绿色&95+/100，所以我很满意。

我不认为这是答案，因为我仍然认为有一个更合适的&有效答案。