javascript - 关于 React、Suspense、lazyLoad 和预加载/渲染元素

Question

我正在研究 <Suspense>和 React.lazy()概念，我想更好地理解为了向现有应用程序添加一些逻辑会发生什么。

让我们从定义开始:

The React.lazy function lets you render a dynamic import as a regular component.

(render 由我突出显示)

和

If the module containing the OtherComponent is not yet loaded by the time MyComponent renders, we must show some fallback content while we’re waiting for it to load[...]

(已加载由我突出显示)

现在，Suspense定义使用术语加载，lazy()使用渲染。

让我们为这个概念添加一些代码。

const ComponentOne = React.lazy(() => import("./ComponentOne"));
const ComponentTwo = React.lazy(() => import("./ComponentTwo"));

function BigBang() {
    return (
        <Suspense fallback={<SplashScreen/>}>
            <section>
                <ComponentOne/>
                <ComponentTwo/>
            </section>
        </Suspense>
    );
}

很好。我们的想法是延迟加载 ComponentOne 和 ComponentTwo。虽然此过程尚未结束，但我们将显示 SplashScreen。

问题现在，假设我将一些本地镜像导入到 ComponentOne 和 ComponentTwo 中(我将只为一个添加代码，让我们假设另一个有类似的东西):

import avatar from "../../img/avatar.svg";
import logo from "../../img/logo.svg";

export default class ComponentOne extends React.Component {
    componentDidMount() {
        console.log("ComponentOne@componentDidMount");
    }

    render() {
        console.log("ComponentOne@render");
        return (
            <div style={{display: 'none'}}>
                <img src={avatar}/>
                <img src={logo}/>
            </div>
        );
    }
}

现在应该清楚我想问的是什么了:

加载所有导入后，SplashScreen 是否消失？换句话说，当 SplashScreen 消失时，我是否可以假设 ComponentOne 和 ComponentTwo 中的所有图像都已加载？

这是主要问题。

第二个问题(这似乎与我有关，但如果不是我可以打开另一个线程)是:如果对上一个问题的回答是“否”，确保图像/字体的最佳策略是什么/“api response”/“other resources”在渲染之前加载，可能因为已经存在的流而维护逻辑？直接fetch()目前不支持到资源。

Answer 1

Suspense 等待获取动态导入的组件文件(比方说 0.js)。现在，一旦 0.js 加载并开始解析，Suspense 就会停止显示 SplashScreen 并委托(delegate)控制您的组件。接下来发生的任何事情都不是延迟加载。这就像您执行静态导入时会发生的情况。

在您的情况下，只有在 SplashScreen 消失后才会加载这两个图像。现在，如果你想预加载/延迟加载图像，有几种方法可以继续。

1) 如果您使用的是 webpack，则可以使用 url-loader 将图像内联为 data-uri。但请注意，这可能会增加您的包大小，并且您还会失去通常是静态的图像的浏览器缓存。

2) 对于 svg，您可以使用 inline-react-svg babel 插件，它将 svg 转换为 react 组件，以便它成为您的包的一部分 (0.js)。但它也有上述相同的权衡。

因此预加载图像有其自身的权衡。可能有更好的替代方案，例如可以轻松完成的延迟加载，也可以从几个第三方库中获得 React HOC。