web-dev-qa-db-ja.com

非常に大規模なWebアプリケーションに対するVue-Routerのベストプラクティスは何ですか？

私は多くの異なるモジュール（管理ユーザー用のtodoモジュール、ドキュメントモジュール、大きなユーザー管理モジュールなど）でWebアプリケーションを作成する必要があります。ページの合計数は100を超えています。また、モジュールアクセスはユーザーごとに異なります。

LaravelおよびVue-routerを使用しています。

しかし、それを行うためのベストプラクティスは何ですか？

  1. すべてに1つの大きなvue-routerを備えたSPAアプリケーションを作成しますか？
  2. すべてのモジュールについて、独自の単一の「SPA」（および独自のvue-router）？
  3. または別の提案...？
laravelvue.jssingle-page-applicationvue-router
23
angelique000

少し遅れましたが、私は質問に答えようとします。これは単なるルーティングレベルの質問ではなく、アーキテクチャ上の質問です。

TLDR：複数のアプローチが必要になります。 1つのアプローチは適合しません。

1.ルーティングモード

まず、 HTML 5履歴モードまたはハッシュモード 2018年であるかどうかを判断する必要があります。HTML5履歴モードを使用することをお勧めします。

履歴モードを使用する場合、クライアント側のルーターがサーバー側のルーターと同期して動作する必要があることを意味します。

2.マイクロフロントエンド

これを知っているかどうかはわかりませんが、 micro-frontends は探している用語です。基本的に、それは分離の最前線です。アプリを複数の小さなアプリに分割する必要があります。各アプリには、ルートコンポーネントrouter、モデル、サービスなどがあります。多くのコンポーネントを共有します（もちろん、Word非常に大きなアプリケーションが重要です。そして、私は文字通りそれを意味します。

3.モノレポに関する考慮事項

マイクロフロントエンドを使用することを選択した場合、LernaまたはBuilderを使用して mono-repo setup を検討できます。

4.ルーティングモジュール-初期化

マイクロアプリに関係なく、アプリには_main.js_または_index.js_という1つの開始点が必要です。このファイルでは、すべてのシングルトンを初期化する必要があります。典型的なVue.jsアプリの主なシングルトンエンティティは、ルートコンポーネント、データストア、Routerなど.

ルーティングモジュールは、どのコンポーネントとも分離されます。このエントリファイルにルーティングモジュールをインポートし、ここで初期化します。

5.ルーティングモジュール-実装

ルーティングモジュールはさらに小さなモジュールに分割する必要があります。そのためには、単純な関数とESモジュールを使用します。各関数は、RouteConfigオブジェクトを返す責任があります。これがどのように見えるかです：

_const route: RouteConfig = {
    path: '/some-path',
    component: AppComponent,
    children: [
        getWelcomeRoute(),
        getDashboardRoute()
    ]
};

function getWelcomeRoute(): RouteConfig {
    return {
        name: ROUTE_WELCOME,
        path: '',
        component: WelcomeComponent
    };
}
_

ルートレベルでは、モジュールの遅延読み込みを検討する必要があります。これにより、多くのバイトを事前にロードする必要がなくなります。

_function getLazyWelcomeRoute(): RouteConfig {

    // IMPORTANT for lazy loading
    const LazyWelcomeComponent = () => import('views/WelcomeComponent.vue');

    return {
        name: ROUTE_WELCOME,
        path: '',
        component: LazyWelcomeComponent
    };
}
_

WebpackやRollupなどのバンドラーを使用しない限り、これを行うことはできません。

5.ルーティングモジュール-Guard

これは非常に重要ですガードは、認証を処理する場所です。 Vue.jsを使用すると、コンポーネントレベルのルートガードを記述できます。 しかし、私の提案はそうすることを控えることです。絶対に必要な場合にのみ実行してください。それは基本的に関心の分離です。ルーティングモジュールには、アプリの承認に関する知識が必要です。そして技術的には、承認はコンポーネントよりもルートに存在/適用されます。これが、ルーティングを個別のモジュールとして作成した理由です。

非常に大規模なアプリケーションには、ReduxやVuexなどのデータストアを使用していると想定しています。ルートレベルのガードを作成する場合は、Redux/Vuexストアのデータを参照して承認を決定する必要があります。これは、ルーティングモジュールにストアを挿入する必要があることを意味します。これを行う最も簡単な方法は、ルーターの初期化を次のような関数にラップすることです。

_export function makeRouter(store: Store<AppState>): VueRouter {
    // Now you can access store here
    return new VueRouter({
        mode: 'history',
        routes: [
            getWelcomeRoute(store),
        ]
    });
}
_

これで、エントリポイントファイルからこの関数を簡単に呼び出すことができます。

6.ルーティングモジュール-デフォルトルート

汎用/インテリジェント404メッセージをユーザーに表示するために、デフォルトのキャッチオールルートを定義することを忘れないでください。

7.ルーティングモジュール-ルーティングデータ

私たちは本当に非常に大きなアプリケーションについて話しているので、コンポーネント内のルーターへの直接アクセスを避けることをお勧めします。代わりに、ルーターデータを vuex-router-sync のようにデータストアと同期させてください。これにより、痛みを伴うバグを節約できます。

8.ルーティングモジュール-副作用

多くの場合、コンポーネント内で$router.replace()または$router.Push()を使用します。コンポーネントの観点から見ると、これは副作用です。代わりに、コンポーネントの外部でプログラムによるルーターナビゲーションを処理します。すべてのルーターナビゲーションの中心的な場所を作成します。これらの副作用を処理するために、この外部エンティティにリクエスト/アクションをディスパッチします。 TLDR;コンポーネント内でルーティングの副作用を直接行わないでください。コンポーネントをSOLIDにしてテストしやすくします。この場合、redux-observableを使用してルーティングの副作用を処理します。

これが、非常に大規模な規模のアプリケーションのルーティングのすべての側面をカバーすることを願っています。

12
Harshal Patil

SPAアプリを使用する場合は、次のプラクティスを使用していることを確認してください。

  1. 遅延読み込み/非同期コンポーネント。通常、静的アセットの遅延読み込みを行います。同じ精神で、ルートを訪れたときにのみコンポーネントをロードする必要があります。 Vueは、コンポーネントをレンダリングする必要がある場合にのみファクトリー関数をトリガーし、将来の再レンダリングのために結果をキャッシュします。
import MainPage from './routes/MainPage.vue'
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')))

const routes = [
  { path: '/main', component: MainPage },
  { path: '/page1', component: Page1 }
]
  1. ルートの結合：（上記に関連）たとえば、次の場合、2つのルートが同じチャンクとバンドルで出力され、いずれかのルートにアクセスするとそのバンドルが遅延ロードされます。
const Page1 = r => require.ensure([], () => r(require('./routes/Page1.vue')), 'big-pages')  
const Page2 = r => require.ensure([], () => r(require('./routes/Page2.vue')), 'big-pages')
1
Arielle Nguyen

Nuxtがそのお手伝いをします。フォルダー構成ファイルを動的にルーター構成ファイルに生成します。 https://nuxtjs.org/guide/routing をご覧ください

ルーティングよりもさらに多くのヘルプ機能があります。ただし、特に大規模なアプリケーション全般では、nuxtを設定することをお勧めします

1
manoi