ReactJS ::代码拆分

  • Z时代
  • 2024-01-10
  • 分类：综合

与任何单页应用程序一样，所有内容都捆绑在一个文件中，如果不加以检查，该文件的大小会迅速增加。Webpack之类的工具可以帮助将此捆绑包拆分为更多可管理的块，然后可以根据需要进行请求。

由于React鼓励创建许多较小的组件，因此有很多打破捆绑的机会。该 反应可装载 封装使得组件来定义正是它需要呈现和的WebPack可以自动分割其束以适应此。

const LoadableButton = Loadable({
  loader: () => import(‘./Button’),
  loading: () => <div>Loading...</div>,
});

可加载是一个HOC，它将动态导入组件所需的任何内容。它需要一些设置，例如在加载所有内容时显示的内容，这使其高度可定制。  然后，LoadableButton可以用作常规组件，而不会出现问题。

对于具有路由的大型应用程序，按路由而不是组件进行拆分可能会更有利。可以通过一个请求插入通用路径，并且可以帮助加快处理速度。在捆绑包的数量和它们的整体大小之间保持平衡非常重要，这将根据应用程序的需求而变化。

 可在此处找到有关react-loadable的更多详细信息 。

以上是 ReactJS ::代码拆分 的全部内容， 来源链接： utcz.com/z/361195.html

回到顶部