dvdの中の部品の怠惰なロード

コンポーネントの必要に応じてロードすることは、ヘッドスクリーンの性能を向上させる重要な手段である.
[email protected]を使用しました[email protected]関連した使い方に変化があります.ネット上の議論は基本的に古いので、よく分からないと混乱します.ここでメモしてください.
[email protected]以前
[email protected]以前の怠惰なロード関連の議論は多くありましたが、dvd-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 ;
}

[email protected]以後
[email protected]を使用しました[email protected]その中のルートはコンポーネント式で、もとの方式はあまりやりにくいです.したがって、dvdはdynamic関数を提供して処理します.はい、[email protected]公開日誌とDVDアプリのドキュメントに紹介されています.具体的な実現形:

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;