Перейти к основному содержимому

[Lv1] Оптимизация на уровне маршрутов: трёхуровневая ленивая загрузка

Ленивая загрузка на уровне маршрутов уменьшает начальный размер JavaScript и улучшает скорость загрузки первого экрана, доставляя код по требованию.

Ситуация​

В мультитенантных продуктах каждый арендатор часто имеет собственную тему и дерево маршрутов. Если всё объединить в один bundle, стартовый JS становится слишком большим.

Типичные симптомы:

  • Медленная начальная загрузка в мобильных сетях
  • Большой bundle main.js
  • Ненужный код для маршрутов, которые пользователь никогда не посетит

Задача​

  1. Сохранять бюджет начального JS минимальным
  2. Загружать только необходимые модули арендатора и маршрута
  3. Сохранять удобство поддержки и скорость разработки

Действие: трёхуровневая ленивая загрузка​

Уровень 1: Динамический модуль маршрутов на уровне арендатора​

// src/router/routes.ts
export default async function getRoutes(siteKey: string) {
  const module = await import(`../../template/${siteKey}/router/routes.ts`);
  return module.routes;
}

Загружается только дерево маршрутов активного арендатора.

Уровень 2: Ленивый импорт компонентов на уровне страниц​

const HomePage = () => import('@/pages/HomePage.vue');

export const routes = [
  {
    path: '/home',
    component: HomePage,
  },
];

Каждый chunk страницы загружается только при необходимости.

Уровень 3: Контроль маршрутов с учётом прав доступа​

router.beforeEach(async (to) => {
  const allowed = await permissionService.canAccess(to.name as string);
  if (!allowed) return '/403';
});

Неавторизованные страницы блокируются до загрузки тяжёлых модулей.

Дополнительные улучшения​

  • Предзагрузка наиболее вероятных следующих маршрутов в режиме простоя
  • Разделение крупных общих зависимостей в отдельные vendor-chunk'и
  • Отслеживание размера chunk'ов на уровне маршрутов в CI

Результат​

Типичное влияние:

  • Начальный JS значительно уменьшен
  • Более быстрый рендеринг первого экрана
  • Лучшее время до интерактивности на слабых устройствах

Краткое резюме для собеседования​

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