Будет ли использование React Suspense для компонента root таким же, как и для всего приложения? - PullRequest
Новая
       56

Будет ли использование React Suspense для компонента root таким же, как и для всего приложения?

0 голосов
/ 12 марта 2020

Я искал способы оптимизации моего текущего приложения React (в настоящее время в 16.13). Один из способов, который я ищу, - измельчить пакет до минимума.

Я видел, что React.lazy позволяет нам изначально разделять код приложения, а затем использовать React.Suspense, чтобы обеспечить механизм отката при получении пакета.

После просмотра документации React я видел несколько примеров использования <Suspense> во всем приложении.

Мне было интересно, будет ли использование приостановки верхнего уровня иметь те же эффекты? 

// app.tsx (Omitted for brevity)
function App() {
      return (
        //https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/362#issuecomment-496773827
        <ApolloProvider client={client as any}>
          <Suspense fallback={<CircularLoader />}>
            <Location>
              {({ location }) => (
                <AuthenticatorProvider
                  location={{ pathname: location.pathname, hash: location.hash }}
                >
                  <ThemeProvider theme={theme}>
                    <Router>
                      <Root path={`${routerBasePath}/*`} />
                    </Router>
                  </ThemeProvider>
                </AuthenticatorProvider>
              )}
            </Location>
          </Suspense>
        </ApolloProvider>
      );
    }

Тогда: 

/// index.tsx
ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

Моя цель в настоящее время - уменьшить начальный размер пакета, и, хотя я все еще пытаюсь выяснить, я хотел знать, предотвратит ли этот механизм эффект водопада в моем приложении, поскольку, насколько я понимаю, каждый раз, когда элемент визуализируется, он будет лениво загружать фрагмент, а затем визуализировать компонент.

...