不能延迟加载Firebase v9的"useAuthState“和"auth”的反应

Question

我有一个反应应用程序，我试图优化。对延迟加载组件来说很容易，但我发现自己被困的地方是尝试异步加载和代码拆分防火墙依赖项。

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

我试着进口：

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


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

    ...

但不允许导入非反作用组件函数。

因此，我尝试在useEffect中加载useEffect()，但是不允许使用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

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

任何帮助都是非常感谢的，谢谢！

Answer 1

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

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

然后，我只在/app中加载Firebase导入，而延迟加载到达/app时呈现的组件。

对于firebase，我仍然可以使用延迟加载选项，但在此之前，这个解决方案会做得很好。移动和桌面PageSpeed的分数都是绿色的，95+/100，所以我很满意。

我没有把这个作为答案，因为我仍然认为有一个更恰当和有效的答案。