Здравствуйте.
Предположим, что есть примерно такая структура директорий:
components
component1
Component1.vue
component2
Component2.vue
component3
Component3.vue
index.js
app.js
В ./components/index.js написано примерно следующее:
export { default as Component1 } from './component1/Component1.vue';
export { default as Component2 } from './component2/Component2.vue';
export { default as Component3 } from './component3/Component3.vue';
Другими словами, index.js - как бы единая точка входа, в которой происходит просто реэкспорт всех компонентов.
Предположим, мне в Component2 требуется Component1.
Я его импортирую напрямую с указанием относительного пути относительно Component2.
// File ./components/component2/Component2.vue
import Component1 from '../component1/Component1.vue';
А в ./app.js, предположим, мне нужен и Component1 и Component2.
Но импортировать я их буду уже через наш ./components/index.js.
// File ./app.js
import { Component1, Component2 } from './components/index.js';
Сколько раз в результате будет загружен Component1?
Мы же его импортируем два раза и разными способами.
Или webpack достаточно умный, чтобы обрабатывать подобные случаи?
UPDATE
Проверил вариант с использованием только index.js, и в дэв и в прод сборках финальный размер сборки не меняется. Из чего я делаю вывод, что webpack всё же достаточно умный.
Но вообще есть ли какая-то разница? Может вариант из примера по каким-то причинам не рекомендуется, или ещё что-то?
Спасибо.