React & Browserify：我有延迟加载的选项吗？

Question

我正在使用带有 Ruby 和 Node 后端的 React 15.6 和 Browserify。我的主页相当臃肿，我想延迟加载首屏下方的图片。 我遇到的所有延迟加载选项都将 webpack 作为依赖项。有没有不需要 webpack 的简单解决方案？

Answer 1

您可以使用新的 React v16.6.0 功能React Lazy

React.lazy 接受一个必须调用动态 import() 的函数。这 必须返回一个 Promise，它解析为具有默认导出的模块 包含一个 React 组件。

例子：

const LazyImageComponent = React.lazy(() => import('./LazyImageComponent'));

function MyComponent() {
  return (
    <div>
      <LazyImageComponent  />
    </div>
  );
}