расщепление кода с помощью Loadable от реагирующих на загрузку причин мерцание экрана - PullRequest
Новая
       46

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

0 голосов
/ 10 февраля 2019

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

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

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

rout.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);
}

1 Ответ

0 голосов
/ 10 февраля 2019

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

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

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