按需加载

按需加载是前端性能优化中的一项重要措施，“按需加载”顾名思义，是指当用户触发了动作时才加载对应的功能。

在单页应用中，第一次加载并不需要全部加载，比如首屏以外的功能，如果全部加载，可能就影响了首屏加载的速度，用户体验就不好了。

在 VD 中，实现 按需加载 很简单：

import Bundle from './components/Bundle';
import Async from './containers/Async';
...

...
<Route 
  path="/async" 
  render={ (props) => (
    <Bundle load={Async}>
      { (Asyncs) => <Asyncs {...props} />}
    </Bundle>
  ) } 
/>
...

在 VD@1.4.x 以后，内置了 dva 框架，根据 dva 最佳实践推荐，按需加载实现如下：

import dynamic from 'dva/dynamic';

const App = dynamic({
    app,
    // models: () => [
    //   import('./models/app'),
    // ],
    component: () => import('./routes/App'),
  });