Отложенный компонент в Nuxt

Большой график, карта или редактор тянут за собой много JavaScript. Если импортировать их сразу, первая отрисовка страницы замедлится. Nuxt умеет откладывать такие компоненты: достаточно в шаблоне указать имя с префиксом Lazy, и код подгрузится отдельным чанком, когда компонент понадобится на экране.

Давайте познакомимся с примером. Файл Heavy.vue в app/components Nuxt регистрирует как Heavy. На странице используем LazyHeavy:

/app/
- /components/
  - Heavy.vue
- /pages/
  - dashboard.vue

Содержимое тяжёлого блока:

<template>
	<section>
		<h2>
			Heavy block
		</h2>
		<p>
			Large widget area
		</p>
	</section>
</template>

На дашборде вызываем отложенную версию без ручного import:

<template>
	<h1>
		Dashboard
	</h1>
	<LazyHeavy />
</template>

Сделайте компонент графика и выведите его на странице отчёта через отложенное имя с префиксом Lazy.

Сделайте компонент карты и подключите его на странице офисов только как отложенный блок.