dva中组件的懒加载

栏目: JavaScript · 发布时间: 5年前

内容简介:组件的按需加载是提升首屏性能的重要手段。dva@2.0使用了react-router@4.0,相关的使用方式有变化,网上的讨论基本上都是旧的,不清楚的话会比较乱,这里做一下记录。dva@2.0以前的懒加载相关讨论有不少,可以参考

组件的按需加载是提升首屏性能的重要手段。

dva@2.0使用了react-router@4.0,相关的使用方式有变化,网上的讨论基本上都是旧的,不清楚的话会比较乱,这里做一下记录。

dva@2.0以前

dva@2.0以前的懒加载相关讨论有不少,可以参考 dva-example-user-dashboard 中的写法,徐飞大佬的文章 使用 Dva 开发复杂 SPA ,本质上借助的是webpack的 require.ensure 实现代码分割,参考 代码分割 - 使用 require.ensure

具体实现形如:

function RouterConfig({ history, app }) {
  const routes = [
    {
      path: '/',
      name: 'IndexPage',
      getComponent(nextState, cb) {
        require.ensure([], (require) => {
          registerModel(app, require('./models/dashboard'));
          cb(null, require('./routes/IndexPage'));
        });
      },
    },
    {
      path: '/users',
      name: 'UsersPage',
      getComponent(nextState, cb) {
        require.ensure([], (require) => {
          registerModel(app, require('./models/users'));
          cb(null, require('./routes/Users'));
        });
      },
    },
  ];

  return <Router history={history} routes={routes} />;
}

dva@2.0以后

dva@2.0使用了react-router@4.0,其中的路由是组件式的,原来的方式就不太好搞。因此dva提供了一个dynamic函数来处理。

dva@2.0发布日志dva api文档 中有介绍。

具体实现形如:

import dynamic from 'dva/dynamic';

function RouterConfig({ history,app }) {
  const UserPageComponent = dynamic({
    app,
    models: () => [
      import('./models/users'),
    ],
    component: () => import('./routes/UserPage'),
  });
  return (
    <Router history={history}>
      <Switch>
        <Route path="/user" component={UserPageComponent} />
        <Route component={IndexPageComponent} />
      </Switch>
    </Router>
  );
}
export default RouterConfig;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自媒体之道

自媒体之道

吴晨光 / 中国人民大学出版社有限公司 / 2018-7-31 / CNY 49.80

内容简介: 《自媒体之道》为你解决四个问题: 1. 一篇10万+的刷屏文章是怎么写出来的? 2. 一支10万+的爆款视频是怎么做出来的? 3. 一个100万+粉丝的大号是怎么运营的? 4. 神秘的人工智能(AI)和备受争议的算法是怎么运行的? 这部超过30万字的著作,集纳了中国顶尖自媒体人和平台运营者3年的实操经验。全书13章,详解案例150+,提炼“锦囊秒句”......一起来看看 《自媒体之道》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

html转js在线工具
html转js在线工具

html转js在线工具