如何在create-react-app中导入单个函数?(摇树不起作用)

Question

我正在使用create-react-app (react-scripts4.0.3)/Ionic React来构建一个移动应用程序。

我遇到了树摇的麻烦，根据这个答案，自v2以来一直支持。

我使用Webpack Bundle Analyzer来分析我的Bundle大小。我用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

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