成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

dva中組件的懶加載

MockingBird / 2610人閱讀

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

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

[email protected]使用了[email protected]，相關(guān)的使用方式有變化，網(wǎng)上的討論基本上都是舊的，不清楚的話會比較亂，這里做一下記錄。

[email protected]以前

[email protected]以前的懶加載相關(guān)討論有不少，可以參考dva-example-user-dashboard中的寫法，徐飛大佬的文章使用 Dva 開發(fā)復(fù)雜 SPA，本質(zhì)上借助的是webpack的require.ensure實現(xiàn)代碼分割，參考代碼分割 - 使用 require.ensure。
具體實現(xiàn)形如：

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 ;
}
[email protected]以后

[email protected]使用了[email protected]，其中的路由是組件式的，原來的方式就不太好搞。因此dva提供了一個dynamic函數(shù)來處理。
在[email protected]發(fā)布日志和dva api文檔中有介紹。
具體實現(xiàn)形如：

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;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101749.html

相關(guān)文章

  • 【單頁面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺界面

    摘要：在的的配置中添加自定義主題由腳手架和官網(wǎng)介紹，我們已經(jīng)自己配置并新建好了主題文件。單頁面博客從前端到后端環(huán)境搭建單頁面博客從前端到后端基于搭建博客前后臺界面單頁面博客從前端到后端基于和的權(quán)限驗證與的設(shè)計 在上篇文章我們已經(jīng)搭建好了基礎(chǔ)的開發(fā)環(huán)境，接下來會介紹如何引入 DVA 和 ANTD ，以及在引入過程中需要注意的問題。這里只會詳細(xì)的書寫部分組件，其他的組件都是大同小異。你可以在 g...

    zqhxuyuan 評論0 收藏0

  • (應(yīng)用)企業(yè)后臺系統(tǒng)敏捷開發(fā)-dva

    摘要：傳統(tǒng)與對比開發(fā)時，我們需要，等文件，并且需要自行分類，不太清晰。因為的數(shù)據(jù)流是單向的，用戶行為視圖變化視圖更新，組件可以在鉤子中決定是否允許當(dāng)前組件內(nèi)的數(shù)據(jù)流動，函數(shù)式組件只能被動接收數(shù)據(jù)流動。這是第三方登陸，如果是內(nèi)部登陸使用跳轉(zhuǎn)。 什么是dva dva 是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案. 為什么使用dva 因為它簡化了react引入redux的過程。 ...

    joywek 評論0 收藏0

  • (應(yīng)用)企業(yè)后臺系統(tǒng)敏捷開發(fā)-dva

    摘要：傳統(tǒng)與對比開發(fā)時，我們需要，等文件，并且需要自行分類，不太清晰。因為的數(shù)據(jù)流是單向的，用戶行為視圖變化視圖更新，組件可以在鉤子中決定是否允許當(dāng)前組件內(nèi)的數(shù)據(jù)流動，函數(shù)式組件只能被動接收數(shù)據(jù)流動。這是第三方登陸，如果是內(nèi)部登陸使用跳轉(zhuǎn)。 什么是dva dva 是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案. 為什么使用dva 因為它簡化了react引入redux的過程。 ...

    notebin 評論0 收藏0

  • Dva.js總結(jié)

    摘要：是基于現(xiàn)有應(yīng)用架構(gòu)等的一層輕量封裝，沒有引入任何新概念，全部代碼不到行。他最核心的是提供了方法，用于把封裝到一起表示的狀態(tài)數(shù)據(jù)觸發(fā)的函數(shù)，是改變的唯一途徑被稱為副作用，在我們的應(yīng)用中，最常見的就是異步操作在中聚合積累的結(jié)果是當(dāng)前的對象。 1.why Dva dva 是基于現(xiàn)有應(yīng)用架構(gòu) (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何...

    mj 評論0 收藏0

  • (入門)手把手帶你更簡單的使用dva

    摘要：介紹首先是一個基于和的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，還額外內(nèi)置了和，所以也可以理解為一個輕量級的應(yīng)用框架。 介紹(dva.js) dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個輕量級的應(yīng)用框架。 特性 易學(xué)易用，僅有 6 個 api，對 redu...

    makeFoxPlay 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<