web-dev-qa-db-fra.com

Quelle est la meilleure pratique de Vue-Router pour les très grandes applications Web?

Je dois créer une application Web avec de nombreux modules différents (comme un module de tâches, des modules de document et un gros module de gestion des utilisateurs pour les administrateurs). Le nombre total de pages est> 100. Et l'accès au module est différent pour chaque utilisateur.

Je travaille avec Laravel et Vue-router.

Mais quelle est la meilleure pratique pour le faire?

  1. Créer une application SPA, avec 1 grand routeur de vue pour tout?
  2. Pour chaque module un propre "SPA" (avec et propre vue-routeur)?
  3. Ou une autre suggestion ...?
laravelvue.jssingle-page-applicationvue-router
23
angelique000

Un peu tard mais j'essaierai de répondre à la question. C'est plus une question architecturale qu'une simple question de niveau de routage.

TLDR: Vous aurez besoin d'un mélange d'approches. Une approche ne conviendra pas.

1. Mode de routage

Tout d'abord, vous devez déterminer si vous allez avec mode historique HTML 5 ou mode de hachage Nous sommes en 2018, et je vous recommande vivement d'utiliser le mode historique HTML5.

Si vous utilisez le mode historique, cela signifie que votre routeur côté client devra fonctionner en synchronisation avec votre routeur côté serveur.

2. Micro-frontends

Je ne sais pas si vous le savez, mais micro-frontends est le terme que vous recherchez. Fondamentalement, c'est votre première ligne de ségrégation. Vous devez diviser votre application en plusieurs applications plus petites. Chaque application aura son composant racine, routeur , modèles, services, etc. Vous partagerez de nombreux composants (bien sûr, Word une très grande application est importante. Et je le pense littéralement.)

3. Considérations relatives au repo

Si vous avez choisi d'aller de l'avant avec les micro-frontends, alors vous pourriez envisager configuration mono-repo en utilisant Lerna ou Builder.

4. Module de routage - Initialisation

Indépendamment des micro-applications, votre application doit avoir un point de départ - main.js Ou index.js. Dans ce fichier, vous devez initialiser toutes vos choses singleton. Les principales entités singleton dans une application Vue.js typique sont Composant racine , Magasin de données , Routeur , etc.

Votre module de routage sera séparé de tout composant. Importez le module de routage dans ce fichier d'entrée et initialisez-le ici.

5. Module de routage - Implémentation

Le module de routage doit être divisé en modules plus petits. Pour ce faire, utilisez des fonctions simples et des modules ES. Chaque fonction sera responsable du retour d'un objet RouteConfig. Voici à quoi cela ressemblera:

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

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

Au niveau de l'itinéraire, vous devriez envisager de faire un chargement paresseux des modules. Cela permettra d'économiser de nombreux octets du chargement initial:

function getLazyWelcomeRoute(): RouteConfig {

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

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

Vous ne pouvez le faire que si vous utilisez un bundle comme Webpack ou Rollup.

5. Module de routage - Garde

Ceci est très important Les gardes sont l'endroit où vous devez gérer votre autorisation. Avec Vue.js, il est possible d'écrire un garde de route au niveau du composant. Mais ma suggestion est de ne pas le faire . Ne le faites que lorsque cela est absolument nécessaire. Il s'agit essentiellement d'une séparation des préoccupations. Votre module de routage doit posséder la connaissance de l'autorisation de votre application. Et techniquement, l'autorisation existe/s'applique à une route plutôt qu'à un composant. C'est la raison pour laquelle nous avons créé le routage en tant que module séparé.

Je suppose que vous utilisez une sorte de magasin de données comme Redux ou Vuex pour la très grande application. Si vous souhaitez écrire des gardes de niveau d'itinéraire, vous devrez consulter les données du magasin Redux/Vuex pour prendre des décisions d'autorisation. Cela signifie que vous devez injecter le magasin dans le module de routage. La façon la plus simple de le faire est d'enrouler l'initialisation de votre routeur dans une fonction comme celle-ci:

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

Vous pouvez maintenant simplement appeler cette fonction à partir de votre fichier de point d'entrée.

6. Module de routage - Route par défaut

N'oubliez pas de définir une route passe-partout par défaut pour afficher un message 404 générique/intelligent à vos utilisateurs.

7. Module de routage - Données de routage

Puisque nous parlons vraiment d'une très grande application , il est préférable d'éviter l'accès direct à un routeur dans votre composant. Au lieu de cela, gardez les données de votre routeur synchronisées avec votre magasin de données comme vuex-router-sync . Vous économiserez ainsi la pénible quantité de bogues.

8. Module de routage - Effets secondaires

Vous utiliserez souvent $router.replace() ou $router.Push() dans vos composants. Du point de vue des composants, c'est un effet secondaire. Au lieu de cela, gérez la navigation du routeur par programmation en dehors de votre composant. Créez un emplacement central pour toute la navigation du routeur. Envoyez une demande/action à cette entité externe pour gérer ces effets secondaires pour vous. TLDR; Ne faites pas d'effet secondaire de routage directement dans vos composants. Cela rendra vos composants SOLID et faciles à tester. Dans notre cas, nous utilisons redux-observable pour gérer les effets secondaires du routage.

J'espère que cela couvre tous les aspects du routage pour une application à très grande échelle .

12
Harshal Patil

Si vous utilisez l'application SPA, assurez-vous que vous utilisez ces pratiques:

  1. Composants de chargement/async paresseux. Nous effectuons généralement un chargement paresseux pour les actifs statiques. Dans le même esprit, nous n'avons besoin de charger les composants que lorsque les itinéraires sont visités. Vue ne déclenchera la fonction d'usine que lorsque le composant doit être rendu et mettra en cache le résultat pour les futurs rendus.
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. Combinaison d'itinéraires: (liée à ci-dessus) Par exemple, dans le cas suivant, 2 itinéraires sont sortis dans le même bloc et le même ensemble, ce qui provoque le chargement paresseux de cet ensemble lors de l'accès à l'une ou l'autre route.
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 peut vous y aider. Il génère votre dossier Structur dynamiquement dans un fichier de configuration du routeur. Jetez un oeil à https://nuxtjs.org/guide/routing

Il a encore plus de fonctions d'aide que de routage. Mais surtout pour les grandes applications en général une idée à mettre sur nuxt

1
manoi