Как импортировать одну функцию в приложение create-реагировать? (тряска дерева не работает)

Question

Я использую приложение create-react-app (react-scripts 4.0.3)/Ionic React для создания мобильного приложения.

У меня проблемы с встряхиванием дерева, которое, согласно этому ответу, поддерживается с версии 2.x приложения 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, и определенно не файл dataRefs.tsx, импортированный функцией useSomeData.

Пакеты разделены таким образом, что useLoginStatusCookie находится в моем основном пакете (первый загружаемый пакет), а функция useSomeData не вызывается до следующего пакета.

Однако, когда я проверяю содержимое пакета с помощью Webpack Bundle Analyzer, я вижу, что все содержимое queries.tsx и dataRefs.tsx загружено в исходный пакет.

Как импортировать только одну экспортированную функцию в приложение create-react-app, чтобы весь файл не загружался в мой пакет?

Как импортировать одну функцию в приложение create-реагировать? (тряска дерева не работает)

Ответы (1)