如何在 create-react-app 中导入单个函数？ （摇树不起作用）

Question

我正在使用 create-react-app (react-scripts 4.0.3)/Ionic React 构建移动应用程序。

我在摇树时遇到问题，

我正在使用 Webpack Bundle Analyzer 来分析我的包大小。我正在用 React.lazy() 和 Suspense.

拆分捆绑包

但是，我注意到一个问题，即正在导入整个文件，而不仅仅是一个函数。

我正在使用 react-query 并且我有一个函数列表，queries.tsx:

import { addDataReferences } from '../utils/dataRefs';

export function useLoginStatusCookie(): UseQueryResult<boolean, Error> {
  const t0 = performance.now();
  return useQuery<boolean, Error>(
    queryKeyCookieLoginStatus,
    async () => doWeHaveLoginToken()
  );
}

export function useSomeData(
  queryKey: string,
  query: string,
): UseQueryResult<MyDataReferences[], Error> {
  return useQuery<MyDataReferences[], Error>(
    queryKey,
    async () => fetchGetWithUserAuth(query),
    {
      onSuccess: (data) => {
        if (data?.[0]) {
          data.map(addDataReferences);
        }
      },
    },
  );
}

现在，在我的 React 组件中，我像这样导入 useLoginStatusCookie()：

import { useLoginStatusCookie } from '../../queries';

我希望这样做的是简单地导入 useLoginStatusCookie 函数而不是 useSomeData 函数，绝对不是 useSomeData 导入的 dataRefs.tsx 文件功能。

包被拆分，因此 useLoginStatusCookie 在我的主包中（第一个要加载的包），并且 useSomeData 函数直到下一个包才被调用。

但是，当我使用 Webpack Bundle Analyzer 检查捆绑包内容时，我看到 queries.tsx 和 dataRefs.tsx 的全部内容都加载到初始捆绑包中。

如何在 create-react-app 中只导入一个导出的函数，这样整个文件就不会被拉入我的包中？

Answer 1

我最终通过将每个函数放在一个单独的文件中解决了这个问题。