Я разрабатывал мобильные приложения для личных резюме, используя 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›
Все основано на следующих ресурсах. Кредит принадлежит им, которые помогают мне решить эту проблему:
- https://web.dev/code-splitting-suspense/
- https://codesandbox.io/s/7zx3jlrry1?from-embed
- https://www.freecodecamp.org/news/how-to-optimize-react-applications-with-lazy-loading-232183e02768/
Первоначально опубликовано на http://malaysiandeveloper.blogspot.com.