dva中组件的懒加载

MockingBird 发布于2019-08-23 15:15 / 2599人阅读

摘要：组件的按需加载是提升首屏性能的重要手段。以前以前的懒加载相关讨论有不少，可以参考中的写法，徐飞大佬的文章使用开发复杂，本质上借助的是的实现代码分割，参考代码分割使用。具体实现形如以后使用了，其中的路由是组件式的，原来的方式就不太好搞。

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

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

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 (
    
      
        
        
      
    
  );
}
export default RouterConfig;

GPU云服务器云服务器 js实现数据的懒加载图片在php中使用组件 asp中文件上传组件 dva

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101749.html

【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

摘要：在的的配置中添加自定义主题由脚手架和官网介绍，我们已经自己配置并新建好了主题文件。单页面博客从前端到后端环境搭建单页面博客从前端到后端基于搭建博客前后台界面单页面博客从前端到后端基于和的权限验证与的设计在上篇文章我们已经搭建好了基础的开发环境，接下来会介绍如何引入 DVA 和 ANTD ，以及在引入过程中需要注意的问题。这里只会详细的书写部分组件，其他的组件都是大同小异。你可以在 g...

zqhxuyuan 2019-08-21 11:42 评论0 收藏0
(应用)企业后台系统敏捷开发-dva

摘要：传统与对比开发时，我们需要，等文件，并且需要自行分类，不太清晰。因为的数据流是单向的，用户行为视图变化视图更新，组件可以在钩子中决定是否允许当前组件内的数据流动，函数式组件只能被动接收数据流动。这是第三方登陆，如果是内部登陆使用跳转。什么是dva dva 是一个基于 redux 和 redux-saga 的数据流方案. 为什么使用dva 因为它简化了react引入redux的过程。 ...

joywek 2019-08-23 17:00 评论0 收藏0
(应用)企业后台系统敏捷开发-dva

摘要：传统与对比开发时，我们需要，等文件，并且需要自行分类，不太清晰。因为的数据流是单向的，用户行为视图变化视图更新，组件可以在钩子中决定是否允许当前组件内的数据流动，函数式组件只能被动接收数据流动。这是第三方登陆，如果是内部登陆使用跳转。什么是dva dva 是一个基于 redux 和 redux-saga 的数据流方案. 为什么使用dva 因为它简化了react引入redux的过程。 ...

notebin 2019-08-16 16:47 评论0 收藏0
Dva.js总结

摘要：是基于现有应用架构等的一层轻量封装，没有引入任何新概念，全部代码不到行。他最核心的是提供了方法，用于把封装到一起表示的状态数据触发的函数，是改变的唯一途径被称为副作用，在我们的应用中，最常见的就是异步操作在中聚合积累的结果是当前的对象。 1.why Dva dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何...

mj 2019-08-26 13:28 评论0 收藏0
(入门)手把手带你更简单的使用dva

摘要：介绍首先是一个基于和的数据流方案，然后为了简化开发体验，还额外内置了和，所以也可以理解为一个轻量级的应用框架。介绍(dva.js) dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。特性易学易用，仅有 6 个 api，对 redu...

makeFoxPlay 2019-08-23 10:47 评论0 收藏0