Developer

Code splitting и lazy loading

↑ 7.2 Рендеринг и производительность · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

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

Уменьшение начального JS — главный рычаг быстрой загрузки SPA.

Идея

Не отдавать весь код сразу: разбить на чанки и подгружать по необходимости.

Способы

// маршруты
const routes = [
  { path: '/reports', component: () => import('./pages/ReportsPage.vue') },
]
 
// компоненты
const Editor = defineAsyncComponent({
  loader: () => import('./Editor.vue'),
  loadingComponent: Spinner,
  delay: 200,
})
 
// библиотеки по требованию
async function exportXlsx() {
  const { utils, writeFile } = await import('xlsx')
}

Vite / Rollup

build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['vue', 'vue-router', 'pinia'] },
    },
  },
}

Стратегии предзагрузки

  • <link rel="prefetch"> — на простое время браузера;
  • import(/* webpackPrefetch: true */ ...) (Webpack), в Vite — автоматический modulepreload;
  • prefetch по hover ссылки или при появлении в viewport (IntersectionObserver).

Нюансы

  • слишком много мелких чанков дают лишние запросы (HTTP/2 смягчает);
  • общие зависимости выносятся в shared chunk автоматически;
  • показывать skeleton, обрабатывать ошибку загрузки чанка (сеть, устаревший деплой);
  • разделять по маршрутам в первую очередь.

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

Вид графа

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