过渡到 React.lazy 加载的组件时闪烁

Question

在这个 repo 上：https://github.com/tlg-265/react-app-vanilla

$ git clone https://github.com/tlg-265/react-app-vanilla
$ cd react-app-vanilla
$ yarn
$ yarn start

我有一个只有 3 页的虚拟应用程序：{ Page1, Page2, Page3 }。

我的目标是：拆分和延迟加载 Page3 并防止在过渡到它时闪烁。

使用我现有的代码，拆分和延迟加载效果很好，但是从 Page2 转换到 Page3 时会闪烁。

以下是一些主要文件：

react-app-vanilla/src/App.js

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ReactLazyPreload } from './utils/Functions';
import './App.css';

import Page1 from './components/Page1';
import Page2 from './components/Page2';
const Page3 = ReactLazyPreload(() => import(/* webpackChunkName: "page-3" */ './components/Page3'));

function App() {
  return (
    <Router history={window.history}>
      <Switch>
        <Route exact path="/" component={Page1} />
        <Route path="/page-2" component={Page2} />
        <Suspense fallback={"Loading"}>
          <Route path="/page-3" component={Page3} />
        </Suspense>
      </Switch>
    </Router>
  );
}

export default App;

react-app-vanilla/src/components/Page2.js

import React from 'react';
import { ReactLazyPreload } from '../utils/Functions';

const Page3 = ReactLazyPreload(() => import(/* webpackChunkName: "page-3" */ './Page3'));

class Page2 extends React.Component {

  componentDidMount() {
    Page3.preload();
  }

  handleNext = (e) => {
    e.preventDefault();
    this.props.history.push('/page-3');
  };

  render() {
    return (
        <>
        <h1>Page 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida leo in pharetra sagittis. Donec sed tempus ex, nec rhoncus justo. Phasellus auctor diam eleifend, vestibulum justo ac, ultrices ipsum. Donec pretium augue ante, eget eleifend mi vehicula eu. Donec vitae sem erat. Vestibulum tincidunt suscipit ex, vitae condimentum odio ornare in. Vestibulum erat neque, semper sit amet suscipit vel, malesuada in diam. Morbi ut eros eget lectus sodales rhoncus.</p>
        <div style={{ textAlign: 'center' }}>
          <button type="button" onClick={this.handleNext} className="button-next">NEXT</button>
        </div>
      </>
    )
  }
}

export default Page2;

react-app-vanilla/src/utils/Functions.js

import React from "react";

export const ReactLazyPreload = importStatement => {
  const Component = React.lazy(importStatement);
  Component.preload = importStatement;
  return Component;
};

我的最后一次提交是基于我在此链接上找到的一些建议：

https://blog.maximeheckel.com/posts/preloading-views-with-react/

但不幸的是它仍在闪烁。

在这里您可以预览我的更改：

关于如何防止从Page2 闪烁到Page 3 的任何想法？

欢迎您按照顶部的说明自行尝试。

谢谢！

Answer 1

这取决于您在加载下一页时要显示什么。 互联网上的许多答案显示使用带有延迟的加载微调器来防止闪烁。

每当呈现页面时，我使用的当前方法都会更新回退。我不使用<Loading /> 组件，而是在准备下一页时显示当前安装的页面。

这里是demo 和source code。