Реагировать на ленивую загрузку - когда использовать - PullRequest
Новая
       26

Реагировать на ленивую загрузку - когда использовать

2 голосов
/ 25 февраля 2020

У меня довольно большое приложение, которое в настоящее время имеет объединенный размер пакета около 2 МБ (3 блока или около того). Чтобы сократить время загрузки, я решил начать использовать относительно новую React Lazy .

Вот пример ленивого импорта:

const Wizard = React.lazy(() => import('./components/wizards/Wizard'));

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

Согласно тому, что я прочитал, у меня нет причина использования обычного импорта.

Мой вопрос: должен ли я просто использовать отложенный импорт для каждого импорта компонента в моем приложении? Почему? Почему бы и нет?

Мне бы очень хотелось услышать, что вы, ребята, думаете.

Ответы [ 2 ]

0 голосов
/ 25 февраля 2020

Нет, для каждого компонента он не нужен. Имеет смысл использовать для каждого макета или страницы. Хорошее место для начала с маршрутов. Большинство людей в сети привыкли к переходам страниц, и для их загрузки требуется некоторое время. Вы также склонны к повторной визуализации всей страницы одновременно, поэтому ваши пользователи вряд ли будут одновременно взаимодействовать с другими элементами на странице.

Например, вы создаете приложение для агрегатора новостей. Ваша заявка включает две страницы, такие как NewsList и NewsItemPage. Каждая страница включает в себя несколько разных компонентов. В этом примере имеет смысл использовать ленивый компонент загрузки для каждой другой страницы. И тогда он загрузит необходимые компоненты.

Приложение также имеет Header и Footer. Они должны быть загружены обычным способом. Так как они используются на каждой странице, и нет смысла в асинхронной загрузке. 

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

import Header from './components/Header';
import Footer from './components/Footer';

const NewsList = lazy(() => import('./pages/NewsList'));
const NewsItemPage = lazy(() => import('./pages/NewsItemPage'));

const App = () => (
  <Router>
    <Header />
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={NewsList}/>
          <Route path="/news/:id" component={NewsItemPage}/>
        </Switch>
      </Suspense>
    <Footer />
  </Router>
);
0 голосов
/ 25 февраля 2020

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

...