Чем отличаются импорты компонентов во Vue?

Question

[Денис Букреев]

Не знаю к какой теме лучше отнести данный вопрос, может все же к вебпаку?

Импортировать компонент в компонент во Vue можно так:

import Layout from 'layouts/Layout'
export default {
  components: {
    Layout,
  },
}

А можно и так:

export default {
  components: {
    Layout: () => import('layouts/Layout')
  },
}

Чем будут отличаться эти импорты?
Какие минусы/плюсы?

Answer 1

[Sashqa]

Выражение import(module) загружает модуль и возвращает промис, результатом которого становится объект модуля, содержащий все его экспорты.
learn.js

Answer 2

[Alex]

Первый случай — традиционный импорт. Второй — динамиический (отложенный) импорт.

В случае WebPack это означает что:

1. Файл layouts/Layout войдёт в состав общей сборки
   
2. Файл layouts/Layout и все его зависимости будут вынесены в отдельный файл
   

Конкретно во Vue это означает:

1. Файл Компонента layouts/Layout будет загружен сразу,
   
2. Файл компонента будет загружен только после того как компонент Layout понадобится.
   

Вот ссылки для изучения:
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://learn.javascript.ru/modules-dynamic-imports

Очень хороший доклад на эту тему:
https://www.youtube.com/watch?v=5nr8zLo9hAg

Answer 3

[Антон Швец]

По втором случае Layout будет помещен в отдельный файл и загрузится при надобности.
Читать тут