Как лениво загружать несколько компонентов одновременно - PullRequest
Новая
       46

Как лениво загружать несколько компонентов одновременно

1 голос
/ 27 апреля 2020

У меня есть 2 компонента, я хочу загрузить их все с помощью отложенной загрузки, например, 

const A = lazy(() => import("../test/A")); 
const B = lazy(() => import("../test/B"));

Это создаст 2 отдельных пакета и импортирует их при необходимости.

Но , Я хочу создать один пакет , и когда этот пакет загрузится, я смогу использовать оба вышеуказанных компонента.

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

Я пытался сделать что-то вроде этого https://codesandbox.io/s/eager-raman-mdqzc?file= / src / App. js

Может кто-нибудь порадовать объяснит мне, возможен ли такой тип функциональности, если да, то как и что я делаю неправильно

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Из документов:

Функция React.lazy позволяет визуализировать динамический c импорт как обычный компонент.

React.lazy принимает функцию, которая должна вызывать Динамо c import(). Это должно вернуть Promise, которое разрешается в модуль с экспортом по умолчанию, содержащим компонент React.

Затем ленивый компонент должен отображаться внутри компонента Suspense, что позволяет нам показать некоторый запасной контент ( например, индикатор загрузки), пока мы ожидаем загрузки отложенного компонента.

Вы можете поместить компонент Suspense в любом месте над отложенным компонентом. Вы можете даже обернуть несколько ленивых компонентов одним Suspense компонентом.

Таким образом, если вы хотите использовать lazy() для обертывания модуля, вы должны иметь компонент как свойство default модуля. Поэтому он не позволит вам автоматически использовать модуль, который использует именованный экспорт в качестве компонента. Однако , вы можете легко сделать обещание, которое преобразует именованный экспорт в экспорт по умолчанию, и обернуть это ленивым: 

// in comboModule.js:
export A from '../test/A'
export B from '../test/B'

// in the code that needs lazy modules
  const A = lazy(() => import('./comboModule').then((module) => ({default: module.A})))
  const B = lazy(() => import('./comboModule').then((module) => ({default: module.B})))

Обратите внимание, что мы должны вызвать import внутри Функция инициализатора передана в lazy, или импорт начнется немедленно. Преимущество lazy в том, что он позволяет подождать, пока родительский компонент не отобразит отложенный компонент перед загрузкой. Однако import() должен кэшировать результат первого импорта и загружать код только один раз.

В функции инициализатора мы используем then для преобразования результата import() из чего-то вроде Promise({A: <Component>, B: <Component>}) к тому, что ленивый ожидает от функции инициализатора: Promise({default: <Component>})

Теперь у нас есть два ленивых компонента, которые оба исходят из одного файла модуля.

Ресурсы:

1 голос
/ 28 апреля 2020

Вы можете использовать Suspense для ожидания их обоих. Есть два пакета, но вы можете подождать загрузки обоих 

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);
...