ReactJS ::代码拆分
与任何单页应用程序一样,所有内容都捆绑在一个文件中,如果不加以检查,该文件的大小会迅速增加。Webpack之类的工具可以帮助将此捆绑包拆分为更多可管理的块,然后可以根据需要进行请求。
由于React鼓励创建许多较小的组件,因此有很多打破捆绑的机会。该 反应可装载 封装使得组件来定义正是它需要呈现和的WebPack可以自动分割其束以适应此。
const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () =>Loading..., });
可加载是一个HOC,它将动态导入组件所需的任何内容。它需要一些设置,例如在加载所有内容时显示的内容,这使其高度可定制。 然后,LoadableButton可以用作常规组件,而不会出现问题。
对于具有路由的大型应用程序,按路由而不是组件进行拆分可能会更有利。可以通过一个请求插入通用路径,并且可以帮助加快处理速度。在捆绑包的数量和它们的整体大小之间保持平衡非常重要,这将根据应用程序的需求而变化。
可在此处找到有关react-loadable的更多详细信息 。