dva中组件的懒加载

Dva 2.0 按需加载实践

最新推荐文章于 2024-06-13 15:25:56 发布

转载最新推荐文章于 2024-06-13 15:25:56 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000018175183

文章标签：

#javascript #webpack #ViewUI

本文详细介绍了在Dva 2.0框架中如何利用dynamic函数进行组件的按需加载，以优化首屏性能。对比了Dva 2.0前后按需加载的不同实现方式，包括使用webpack的require.ensure和react-router@4.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;