@24hr/progressive-loadable 中文文档教程

Question

ProgressiveLoadable

这有助于您在视口中逐步加载和混合组件。 它应该与 react-loadable 一起使用 启用代码拆分。

代码拆分和渐进式水合作用是缩小您在浏览器中加载的第一批 javascript 的极其有效的技巧，但仍然 显示用户加载到浏览器中的正确内容（使用服务器端渲染）。

因此，不仅仅是服务器端渲染然后水合一切， 您在服务器上渲染所有内容，然后混合可见的部分并等待视口外的所有内容，直到用户滚动。 当您的组件可见时，您加载块并混合最后一部分。

How to use

正常的 react-loadable 是这样加载的

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

使用 ProgressiveLoadable 你只需要这样改变它：

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

// THIS IS THE EXTRA WRAPPER
const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent);

export default class App extends React.Component {
  render() {
    return <ProgressiveLoadable/>; // THIS IS CHANGED AS WELL
  }
}

如果你想改变默认阈值（默认是 .3，即 30组件的百分比需要可见），您只需将其作为选项发送：

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

const ProgressiveLoadableComponent = ProgressiveLoadable(LoadableComponent, { threshold: .5 });

export default class App extends React.Component {
  render() {
    return <ProgressiveLoadable/>;
  }
}

Other info

这使用 IntersectionObserver，它在 ie 11 中不存在。在 ie 11 或其他没有 IntersectionObserver 的浏览器中，它只会假设组件 在视口中。