dva中元件的懶載入

二師兄發表於2019-02-17
元件

元件的按需載入是提升首屏效能的重要手段。

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;

相關文章