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

Question

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

我在摇树时遇到问题，according to this answer has been supported since v2.x of create-react-app.

我正在使用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

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