Какая практика Vue-Router лучше всего подходит для очень больших веб-приложений?

Если вы используете приложение 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 }
]

2. Объединение маршрутов: (относится к вышеизложенному). Например, в следующем случае 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')

Nuxt может вам в этом помочь. Он динамически генерирует вашу папку Structur в файл конфигурации маршрутизатора. Взгляните на https://nuxtjs.org/guide/routing

В нем даже больше вспомогательных функций, чем маршрутизация. Но особенно для больших приложений вообще идея поставить на nuxt

Немного поздно, но я постараюсь ответить на вопрос. Это скорее архитектурный вопрос, чем просто вопрос уровня маршрутизации.

TLDR: You will need a mix of approaches. One approach won't fit.

1. Режим маршрутизации

Во-первых, вы должны определить, собираетесь ли вы с Режим истории HTML 5 или режим хеширования Это 2018 год, и я определенно рекомендую вам использовать режим истории HTML5.

Если вы используете режим истории, это означает, что ваш клиентский маршрутизатор должен будет работать синхронно с серверным маршрутизатором.

2. Микро-интерфейсы

Я не уверен, знаете ли вы это, но микро-интерфейсы - это термин, который вы ищете. По сути, это ваша первая линия сегрегации. Вы должны разделить свое приложение на несколько небольших приложений. У каждого приложения будет свой корневой компонент, маршрутизатор, модели, сервисы и т. д. Вы поделитесь многими компонентами (конечно, слово очень большой application важно. И я буквально это имею в виду).

3. Соображения по поводу монорепо

Если вы решили продолжить использование микро-интерфейсов, вы можете подумать о установка монорепо с помощью Lerna или Builder.

4. Модуль маршрутизации - инициализация

Независимо от микроприложений, ваше приложение должно иметь одну отправную точку - main.js или index.js. В этом файле вы должны инициализировать все свои синглтоны. Основными одноэлементными сущностями в типичном приложении Vue.js являются Корневой компонент, Хранилище данных, Маршрутизатор и т. д.

Ваш модуль маршрутизации будет отделен от любого компонента. Импортируйте модуль маршрутизации в этот входной файл и инициализируйте его здесь.

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-маршрутизатор-синхронизация . Так вы избавите от болезненного количества ошибок.

8. Модуль маршрутизации - побочные эффекты.

Вы часто будете использовать $router.replace() или $router.push() в своих компонентах. С точки зрения компонентов это побочный эффект. Вместо этого обрабатывайте программную навигацию по маршрутизатору за пределами вашего компонента. Создайте центральное место для всей навигации по маршрутизатору. Отправьте запрос / действие этому внешнему объекту, чтобы обработать эти побочные эффекты за вас. TL; DR; Не выполняйте побочный эффект маршрутизации непосредственно в ваших компонентах. Это сделает ваши компоненты НАДЕЖНЫМИ и легко протестируемыми. В нашем случае мы используем redux-observable для обработки побочных эффектов маршрутизации.

Я надеюсь, что это охватывает все аспекты маршрутизации для приложения масштабирования очень большой.