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 />;
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!