Developer

Lazy loading маршрутов

↑ 5.1 Vue Router · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Как уменьшить начальный бандл и что происходит при ошибке загрузки чанка.

Объяснение

Динамический import() создаёт отдельный чанк для страницы, загружаемый при первом переходе.

const routes = [
  { path: "/", component: HomePage },                                           // критичные — сразу
  { path: "/reports", component: () => import("@/pages/ReportsPage.vue") },     // ленивый чанк
  { path: "/admin", component: () => import(/* webpackChunkName: "admin" */ "@/pages/AdminPage.vue") },
];

Vite (Rollup) сам делит код; управление:

// vite.config.ts
build: { rollupOptions: { output: { manualChunks: { vendor: ["vue", "vue-router", "pinia"], charts: ["echarts"] } } } }

Оптимизации:

ПриёмЭффект
Ленивые страницыменьше начальный JS
Предзагрузка (prefetch/modulepreload)быстрее следующий переход
Предзагрузка по hover/видимости RouterLinkзагрузка до клика
Группировка чанковменьше запросов
Анализ бандлаrollup-plugin-visualizer

Ошибка загрузки чанка после деплоя (старый чанк удалён):

router.onError((err, to) => {
  if (/Failed to fetch dynamically imported module|Importing a module script failed/.test(err.message)) location.assign(to.fullPath);  // жёсткая перезагрузка
});
window.addEventListener("vite:preloadError", () => location.reload());

Индикатор загрузки: глобальный прогресс-бар в beforeEach/afterEach, Suspense, скелетоны.

Нюансы и подводные камни

  • Слишком мелкие чанки → много запросов; слишком крупные → замедление.
  • Не оборачивайте defineAsyncComponent вокруг роут-компонентов: роутер уже поддерживает ленивую загрузку.
  • Кэширование чанков: имена с хэшем содержимого; index.html не кэшируйте долго.
  • Загрузка на медленной сети: предзагрузка критичных страниц.

Практика

  1. Сделайте все страницы ленивыми и посмотрите чанки в dist.
  2. Добавьте прогресс-бар при навигации.
  3. Обработайте ошибку загрузки чанка перезагрузкой.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки