Я разрабатывал мобильные приложения для личных резюме, используя Ionic Framework + React и Capacitor. Он использует несколько файлов JSON, чтобы я мог легко управлять им в будущем.

Он отлично работает, когда я запускаю команду npm start или ionic serve. Однако, когда я перемещаю его в мобильные приложения, возникает проблема. Он отстает, несмотря на то, что работает на эмуляторе или даже на моих устройствах, и я просто использую локальные файлы.

После нескольких дней гугления и проб и ошибок я нашел хорошее решение. Использовал

  • Ленивый
  • Приостановить
  • Контроллер ошибок

И это должно решить ее.

Вот это сделано:

1. Ленивый и приостановленный

импортировать React, {lazy, Suspense, Component} из «реагировать»;

const AboutPage = lazy(() =› import(‘./AboutPage’));

class Abouts extends Component‹any, any› {

конструктор (реквизит: любой) {

супер (реквизит);

это.состояние = {

подробности: правда

}

}

показать детали() {

this.setState({детали: правда});

}

renderLoader = () =› ‹div className="loader"›Загрузка информации и кредитов…‹/div›;

оказывать() {

const {детали} = this.state;

возвращение (

‹div className="divLoading"›

{ Детали &&

‹Резервный вариант приостановки={this.renderLoader()}›

‹О странице /›

‹/Приостановка›

}

‹/дел›

);

}

}

экспортировать информацию по умолчанию;

2. Контроллер ошибок

класс ErrorBoundary расширяет React.Component‹любой, любой› {

конструктор (реквизит: любой) {

супер (реквизит);

this.state = {hasError: false};

}

статический getDerivedStateFromError (ошибка: любая) {

вернуть {hasError: true};

}

оказывать() {

если (this.state.hasError) {

return ‹p›Ошибка загрузки! Пожалуйста, перезагрузите.‹/p›;

}

вернуть this.props.children;

}

}

‹Граница ошибки›

‹Задержка приостановки={this.renderLoader()}›

‹Страница публикации /›

‹/Приостановка›

‹/ErrorBoundary›

Все основано на следующих ресурсах. Кредит принадлежит им, которые помогают мне решить эту проблему:

  1. https://web.dev/code-splitting-suspense/
  2. https://codesandbox.io/s/7zx3jlrry1?from-embed
  3. https://www.freecodecamp.org/news/how-to-optimize-react-applications-with-lazy-loading-232183e02768/

Первоначально опубликовано на http://malaysiandeveloper.blogspot.com.