dva中組件的懶加載

MockingBird 發布于2019-08-23 15:15 / 2601人閱讀

摘要：組件的按需加載是提升首屏性能的重要手段。以前以前的懶加載相關討論有不少，可以參考中的寫法，徐飛大佬的文章使用開發復雜，本質上借助的是的實現代碼分割，參考代碼分割使用。具體實現形如以后使用了，其中的路由是組件式的，原來的方式就不太好搞。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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