使用 Loadable 从 react-loadable 拆分代码会导致屏幕闪烁

Question

我正在尝试将代码拆分应用于我的 React 应用程序。下面的代码是我的路线，其中 Loadable 从 react-loadable 应用了代码拆分。通过实施，每次我访问每个页面时，都会正确加载来自 webpack 的代码块。但是，当我最初访问我的网页时，它最初会导致屏幕闪烁。之后，如果我移至另一页，则不再有屏幕闪烁。它只在最初访问我的网站时发生。

有人知道为什么会这样吗？我的配置有问题吗？

顺便说一句，我在我的 React 应用程序中使用 Node.js 服务器端渲染。是不是和代码拆分导致的屏幕闪烁有关系？

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

发生闪烁是因为路由器在路由时没有您的组件源，并且它按照您在 loading 提供给 Loadable HOC 的函数中定义呈现 null 为防止闪烁，您可以渲染一个如下所示的加载组件：https://github.com/osamu38/react-loadable-router-example/blob/master/src/components/Loading.js

或者您可以像这样在 ComponentDidMount 上预加载所有页面（您应该将组件转换为 class 组件）：

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

使用 Loadable 从 react-loadable 拆分代码会导致屏幕闪烁

code splitting with Loadable from react-loadable causes screen flicker

reactjs

code-splitting

react-loadable