Расщепление кода с помощью Loadable от реагирующих на загрузку причин мерцание экрана

Question

Я пытаюсь применить разбиение кода к моему приложению React. Код ниже - это мои маршруты с разделением кода, примененным Loadable от react-loadable, При реализации каждый раз, когда я получаю доступ к каждой странице, фрагмент кода из веб-пакета загружается правильно. Однако, когда я вначале захожу на свою веб-страницу, она первоначально вызывает мерцание экрана. После этого, если я перейду на другую страницу, больше не будет мерцания экрана. Это происходит только при первом доступе к моему сайту.

Кто-нибудь знает, почему это происходит? Что-то не так в моей конфигурации?

Кстати, я использовал рендеринг на стороне сервера с Node.js в своем приложении React. Это как-то связано с мерцанием экрана при разделении кода?

routes.jsx

import React from "react";
import Loadable from "react-loadable";
import { Route, Switch } from "react-router-dom";

import NotFound from "routes/not-found";

const Landing = Loadable({
  loader: () => import(/* webpackChunkName: "landing" */ "routes/landing"),
  loading: () => null,
  modules: ["landing"]
});

const About = Loadable({
  loader: () => import(/* webpackChunkName: "about" */ "routes/about"),
  loading: () => null,
  modules: ["about"]
});

export default props => {
  return (
    <Switch>
      <Route
        exact
        path="/"
        render={routeProps => <Landing {...routeProps} options={options} />}
      />
      {/* <Route exact path="/" component={Homepage} /> */}
      <Route
        exact
        path="/about"
        render={routeProps => <About {...routeProps} options={options} />}
      />

      <Route component={NotFound} />
    </Switch>
  );
};

SRC / index.js

const { store, history } = createStore();
const generateClassName = createGenerateClassName();

const Application = (
  <JssProvider generateClassName={generateClassName}>
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Frontload noServerRender={true}>
            <App />
          </Frontload>
        </ConnectedRouter>
      </Provider>
    </MuiThemeProvider>
  </JssProvider>
);

const root = document.querySelector("#root");

if (root.hasChildNodes() === true) {
  // If it's an SSR, we use hydrate to get fast page loads by just
  // attaching event listeners after the initial render
  Loadable.preloadReady().then(() => {
    hydrate(Application, root, () => {
      document.getElementById("jss-styles").remove();
    });
  });
} else {
  // If we're not running on the server, just render like normal
  render(Application, root);
}

Answer 1

Мерцание происходит потому, что у маршрутизатора нет источника вашего компонента при маршрутизации, и он рендерит null как вы определили в loading Функция Func, предоставляемая Loadable HOC, для предотвращения мерцания, вы можете отобразить компонент Loading, который должен выглядеть примерно так: https://github.com/osamu38/react-loadable-router-example/blob/master/src/components/Loading.js

или вы можете предварительно загрузить все страницы onComponentDidMount следующим образом (для этого вы должны преобразовать свой компонент в компонент класса):

 componentDidMount = () => {
    About.preload()
    Landing.preload()
  }