Реагируйте на ленивую загрузку файла JavaScript - PullRequest
Новая
       26

Реагируйте на ленивую загрузку файла JavaScript

0 голосов
/ 28 ноября 2018

Я пытаюсь повысить производительность моего приложения с помощью React.lazy.Так как LightWallet Ethereum - это огромный файл, я хотел бы поместить его в отдельный пакет.Текущий рабочий импорт выглядит следующим образом: 

import lightwallet from 'eth-lightwallet/dist/lightwallet.min.js';

Когда я пытаюсь импортировать с использованием ленивого синтаксиса 

const lightwallet = React.lazy(() => import('eth-lightwallet/dist/lightwallet.min.js'));

Только объект React.lazy ($$ typeof: Symbol(react.lazy)) возвращается вместо объекта lightwallet.Я думаю, что это связано с тем, что Lightwallet не имеет экспорта по умолчанию.Как я мог обойти эту проблему?Спасибо!

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Я предлагаю следующий пример:
https://reacttraining.com/react-router/web/guides/code-splitting

react-loadable - это пакет npm, который делает расщепление кода (также называемое отложенной загрузкой) довольно простым, а также предоставляет вам возможность рендерингазагрузка компонента до тех пор, пока не завершится отложенная загрузка.

Единственный недостаток в том, что если вы используете Babel для переноса пакетов кода, вам придется добавить поддержку синтаксиса динамического импорта, webpackуже имеет это по умолчанию, но Babel нет.

Плагин Babel:
@babel/plugin-syntax-dynamic-import
сделает это возможным, добавив поддержку синтаксиса.

Я рекомендую react-loadable более React.lazy, поскольку это делает отображение загружаемого компонента в то время, как ленивая загрузка происходит ОЧЕНЬ легко, и предоставляет вам ловушки для отображения компонента ошибки и повторного импорта в случае сбоя.

Подробнее о react-loadable здесь:
https://github.com/jamiebuilds/react-loadable

Ваш код будет выглядеть примерно так: 

import Loadable from 'react-loadable';
import Loading from './YOUR-LOADING-COMPONENT';

const LoadableWallet = Loadable({
  loader: () => import('eth-lightwallet/dist/lightwallet.min.js'),
  loading: Loading,
});

export default class Wallet extends React.Component {
  render() {
    return <LoadableWallet/>;
  }
}
0 голосов
/ 28 ноября 2018

Убедитесь, что ваша версия реакции реагирует на React v16.6.0.А также основная идея React.Ленивый - это React.lazy принимает функцию, которая должна вызывать динамический импорт ().Это должно вернуть Promise , которое разрешается в модуль с экспортом по умолчанию , содержащим React компонент .Но разве этот сценарий min.js не даст никакого обещания.Скорее всего, это не сработало.

...