react-router4 +react-loadable 实现Code Splitting

前端之家收集整理的这篇文章主要介绍了react-router4 +react-loadable 实现Code Splitting前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

之前在react-router中文官方文档使用的是require。ensure实现按需加载,升级之后,这个方法就走不通了。
之后看了react-router的官网,按需加载只需要神器 react-loadable 。
react-loadable的好处:

  1. 基于import()的自动代码拆分
    import()的厉害之处在于 Webpack 2 可以自动拆分代码,不论你在何时加入新代码,都不用做其他额外的工作,你可以通过切换 import() 位置来轻易试验代码拆分点,以便让你的app达到最佳性能
  2. 避免组件加载闪烁
    Loading组件需要接收一个pastDelay prop(默认200ms)
    export default function Loading({ error,pastDelay }) {

    if (error) {
       return <div>Error!</div>;
     } else if (pastDelay) {
       return <div>Loading...</div>;
     } else {
       return null;
     }

    }

  3. 预加载
    Loadable 创建的组件向外暴露了一个用于预加载的静态方法:组件.preload()
    最后说到webpack搭配react-loadable实现懒加载:
    使用到的库有:react-loadable+plugin-Syntax-dynamic-import
    在 .babelrc进行如下配置:

    {
     "presets": [
       "react"
     ],"plugins": [
       "Syntax-dynamic-import"
     ]

    }
    完整使用如下:

import Loadable from 'react-loadable';
import Loading from './Loading';

const LoadableComponent = Loadable({
  loader: () => import('./Dashboard'),loading: Loading,})

export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}
原文链接:https://www.f2er.com/react/301602.html

猜你在找的React相关文章